Chart.js V2 ticklines no grid - javascript

I'm using ChartJs V2. Trying to have no horizontal gridlines but still have a little tick-line at the ticks. How is this possible? I'm using angular-charts to set the global options currently:
scales: {
yAxes: [{
gridLines: {
display: false,
drawTicks: true,
}
}],
}
What I have:
What I want:

The gridlines display option must be set to true for the ticks part of the gridlines to be drawn.
To show only the ticks, use the drawOnChartArea option to turn off the gridlines on the chart.
scales: {
yAxes: [{
gridLines: {
display: true,
drawOnChartArea: false,
}
}],
}
EDIT:
JSFiddle

What you need for this are Chart.js plugins.
They let you handle what is happening when events like the rendering or the update are triggered.
For instance, in your case, we want to draw again the ticks which were erased via the display:false attribute of options.scales.yAxes.gridLines.
We will then need the afterDraw event. Plugins in Chart.js are created like this :
Chart.pluginService.register({
afterDraw: function(chart, easing) {
// Your code in here
}
});
Now that you know how to do, let's focus on what to do.
What we want is to redisplay the tick lines on the yAxes. But they were removed (as I said above).
We can't bring them back, but since Chart.js charts are using a <canvas> tag, we can try to draw them once again.
To do it dynamically (most I can at least), we will need to loop in the different ticks of your y axe and, by also getting the height of your axe, we will be able to draw our own ticks.
Here is a jsFiddle (improved by the OP) with some explanation about what we must do and of course a fully working example, and here is its preview :

Related

How to remove legend at the bottom of chartjs doughnuts

I'm trying to remove all default labels from chartjs doughnut charts but the one at the bottom doesn't seem to go away
There was initially one legend at the top but I managed to hide that ut now I'm faced with labels at the bottom which completely ruin the chart
here's my options property in my config
options: {
cutoutPercentage: 80,
legend: {
display: false
},
tooltips: {
enabled: false,
},
}
I want all labels and legends to be gone completely so I can define my one with HTML, CSS and custom javascript
Here's a screenshot of what's happened
messed up chart that makes me want to cry
You must have some global settings or other code that is causing the x-axis to be displayed, as it is not configured in your options above and is not the default.
I put together a sample chart that shows the x-axis being displayed similar to yours.
If you turn this off in your options, that should no longer be shown. You can toggle that setting to show/not show in the demo to see the difference.
options: {
cutoutPercentage: 80,
legend: {
display: false
},
tooltips: {
enabled: false,
},
scales: {
xAxes: [{ display: false }] // <-- add this
}
}

Chart.js, adding footer to chart

Using Chart.js 2.0. I'm looking for a way to add a footer (line of text) at the bottom of the chart in order to display sources of data.
I tried to solve it via the option object, the same way as title and legend are included and modified. Like this:
`options: { ...
footer: {
display: true,
text: 'data from xy'
}
}`
I saw 'footer' several times mentioned in the documentation and ways to style it or use it in the context of 'tooltips', but haven't seen anything how to add it concretely.
EDIT/UPDATE:
I've found two workarounds (but no perfect solution) to add a footer to the chart while trying to solve this. In case someone is running into same problem like I did, here some suggestions how to solve this.
Nr. 1: adding a HTML element. This workaround has the disadvantage that the added HTML element is not shown if a user downloads the chart as a .png. Maybe this is the best solution, if the element doesn't have to be visible if a user downloads the chart as a .png.
`var myChart = new Chart(ctx, {
type: 'line',
data: { ... },
options: {
legend: { ... },
...
legendCallback: function(){
return '<p>bla bla</p>';
},
...
},
});
document.getElementById('legendID').innerHTML =
myChart.generateLegend();`
adding AFTER the canvas a div to append the new HTML element
<div id=legendID></div>
Nr. 2: adding another dataset which is empty but a label which contains the information that is supposed to be displayed. borderColor and backgroundColor set to transparent. Adding some empty labels (" ") gives some distance between labels and the footer which is added. The disadvantage of this workaround are the limited possibilities for styling.
Nr. 3: the solution of ana liza. This finally works best for my case since the added info is visible on the .png.
From the official docs:
Labeling Axes
When creating a chart, you want to tell the viewer what data they are viewing. To do this, you need to label the axis.
The scale label configuration is nested under the scale configuration in the scaleLabel key. It defines options for the scale title. Note that this only applies to cartesian axes.
You can add labels for both axes but in your case, since you only need it on the x-axis, your chart options should look similar to this.
var options = {
scales: {
xAxes: [
{
scaleLabel: {
display: true,
labelString: 'Party size',
fontColor: '#C7C7CC',
fontSize: 11
}
}
]
}
};

ChartJs - Adding padding after Y- Axis

I am using chart js 2.7 .I need to add padding after Y-Axis.Means i need a gap before the start and end of the graph. I need to bring the labels inside the x-axis line. I found a similar question below.
How to Add X axis Padding in chart js Line Graph
But it provides a solution by adding null values. Is there any other solution.
Thanks
Add to your options:
options: {
scales: {
yAxes: [{
ticks: {
padding: 100
}
}],
}
}
Working jsfiddle -> https://jsfiddle.net/vz4qhqpw/2664/

zooming/blowup and panning option in chart.js on category scales

i am using chart.js for making the charts. i have successfully done the graph things. Just i want a help in this regard that sometimes there could be just 30-40 points to plot. but usually there are about 1000 points.
So what is the good option which i can use for better analysis for this reporting tool. Like is there any option of blow up specific point or i can use a scroll to scroll my chart and expand it horizontally, a very large.
this is my chart image.
u can see there are many points and all are congested. i want to know what is the suitable solution.
This is my chart configuration in which i have set it to the responsive.
var options = {
responsive: true,
title: {
display: true,
position: "top",
text: label,
fontSize: 18,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
},
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipItems, data) {
var multistringText = ['Assay Value: '+tooltipItems.yLabel];
multistringText.push('Assigned Value: '+assigned_value[tooltipItems.index]);
multistringText.push('Sample ID: '+sample_id[tooltipItems.index]);
return multistringText;
}
}
},
Update: After searching and creating an issue on the official chartjs git repository . This is not possible for the category/simple x-axis lines. This mean you cannot add pan through the chart in this way using the category/simple scales on x-axis. however zooms still works fine.
Editing this question for the future readers.
P.s: Leave a comment in case of negative voting.
Check out chartjs-plugin-zoom. It is a plugin that adds the capability to zoom in/out and pan left/right/up/down to view the rest of your data that is not currently displayed on the zoomed chart.
Here is a live codepen example.
I'm not sure it will do exactly what you need, but its a great place to start (you can use this as a base and extend it to your needs). This plugin is also developed/supported by the same team as chart.js.

Horizontal stacked bar chart with chart.js

I am trying to find out if there is any plugin to do a horizontal stacked bar chart with chart.js
I see there are plugins for stacked bar charts and also for horizontal bar charts, but I didn't find one that combines both.
https://github.com/Regaddi/Chart.StackedBar.js
Anyone know how to achieve this?
UPDATED for CHARTJS V4
With the new version of ChartJS, you need to set the indexAXIS to 'y', and set the x and y scales to stacked.
options: {
indexAxis: 'y',
scales: {
x: {
stacked: true
},
y: {
stacked: true
}
}
}
Here's an updated Codepen using V4 of ChartJS
https://codepen.io/jamiecalder/pen/vYaWyVy
ORIGINAL ANSWER BELOW USES ChartJS V2
I know this is a few months old, but I thought I'd add my answer for future generations.
I was able to do without extra plugins. If you set the xAxes and yAxes to stacked:true under scales, you can create a stacked horizontal graph.
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
Here's a quick pen to show how I did it. http://codepen.io/jamiecalder/pen/NrROeB
Take a look at the fork ChartNew.js (https://github.com/FVANCOP/ChartNew.js). This has HorizontalStackedBars (and many other additions). See https://github.com/FVANCOP/ChartNew.js/wiki/050_available_graphs for how its going to look like.

Categories