I have a line chart with a y axis scale that has ticks with a step size of 5, I would like to have the gridlines have a step/interval of 1. I can't see an obvious way to do it, is there anyway to achieve this in chart.js?
Thanks in advance!
Unfortunately, with the current Chart.js API, there is no clean way to configure gridline placement independent from tick placement. In other words you cannot configure an axis to show a tick every 5 steps while still showing gridlines every 1 step.
Even though there is no clean way, there is however, still a way to get the behavior your after.
The below configuration will give you the desired results, but the only drawback is the gridlines still extend beyond the axis for the hidden tick labels (e.g. it looks a little funny).
var chartInstance = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
stepSize: 1
},
callback: function(value, index, values) {
if (value % 5 === 0) {
return value;
} else {
return ' ';
}
},
}]
}
}
});
Here is a working example via codepen.
Related
Is it possible to achieve this -
Different colour in the same bar
Color length proportional to % of data available in that year
In total there are 4 years and I want to partition each bar into a maximum of 4 parts (can be 1, 2, 3 or 4 parts depending on years selected).
What you are searching for is something called "Stacked Bar Chart". This kind of chart can be used with the library you mentioned.
As in the documentation:
Stacked bar charts can be used to show how one data series is made up of a number of smaller pieces.
Here an example taken from the documentation:
var stackedBar = new Chart(ctx, {
type: 'bar',
data: data,
options: {
scales: {
x: {
stacked: true
},
y: {
stacked: true
}
}
}
});
Please, for more details refer to this section of the documentation:
https://www.chartjs.org/docs/next/charts/bar/#stacked-bar-chart
Chart.js is amazing, but I'm using angularjs chart.js directive. I can turn off all dots on all lines with the below code where vm.options is set to the chart-options attribute:
vm.options = {
elements: {
point: {
radius: 0
}
}
};
However, I'd only like to hide the dots on 2 of the 3 datasets I have and I'm not sure how to get that for angularjs chart.js. My dataset's is just an array of arrays of data (not an object), and when I look at chart.js and how they hide dots they do it on a dataset object, but that doesn't match how I'm doing my datasets so I'm confused.
you can use pointRadius: 0 in your $scope.datasetOverride to turn off dots for each dataset
$scope.datasetOverride = [{
label: "No Dots Line",
fill: true,
pointRadius: 0,
}];
https://codepen.io/vfx/pen/dLpEgW
I am experiencing some weird plotting by Zingchart. I am trying to plot a smooth curve as it can seen in the Excel graph below.
However, when using the same input data on Zingchart, some weird stepped chunks are produced. Is this a problem of Zingchart or have I made a mistake in the configuration?
var chartData = {
type: "line",
plot: {
aspect: "spline"
},
series: [ // Insert your series data here.
{
"values":[[0.008376349,-9.167595],
[0.008375615,59.43667],
[0.008374971,103.23595],
[0.008374511,-168.06818],
[0.008374427,-249.25804],
[0.008375174,125.39198],
[0.008376393,-355.0086],
[0.008377762,-130.61668],
[0.008379059,298.63593],
.....
[0.009247098,-15090.601],
[0.009836536,-4773.134]],
"text":"A/B"
}
]
};
zingchart.render({ // Render Method[3]
id: "chartDiv",
data: chartData,
height: 400,
width: '100%'
});
Thanks to the excellent response time of Zingchart support who guided me on the answer, it seems that the solution is to change the plot type:
plot: {
aspect: "segmented"
},
I'm working with nvd3 and I'm not much hands-on with its styling (css properties) to customize it. I have a line chart with two data lines on it.
The code for drawing the lines is following:
nv.addGraph(function() {
chart = nv.models.lineChart();
chart.margin({
left : 100,
bottom : 100
}).useInteractiveGuideline(true).showLegend(true).duration(250);
chart.xAxis.axisLabel("Date").tickFormat(function(d) {
var date = new Date(d);
return d3.time.format("%b-%e")(date);
});
chart.yAxis.axisLabel('').tickFormat(d3.format(',.2f'));
chart.showXAxis(true);
d3.select('#startupRiskLineChart').datum(
prepareDataObj(val1_y, val1_x, val2_y, val1_x))
.transition().call(chart);
;
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) {
nv.log('New State:', JSON.stringify(e));
});
return chart;
});
Is there any way to fill the area under data line with a lighter color?
Any help would be highy apperiated.
To get a line chart with a filled area in a specific color:
Add area: true to the data series, as in this example.
Add this CSS: .nv-area { fill: red }
The opacity of the area is set to 0.5, so filling it with red will actually make it pink:
chart.color(["red","yellow","blue"]);
'#00FFFF','#0FF','cyan' all are valid ways to set colors
Another way is set it in data itself
[{
values:[{x:1,y:1},{x:2,y:4},{x:3,y:9},{x:4,y:16}],
key: 'not a Sine Wave',
color: '#ff7f0e' //color - optional: choose your own line color.
}]
duplicate question i guess
Add
classed: "my-custom-approx-line"
to config of specific line and add styling:
&.nv-area {
fill-opacity: 0.2;
}
As of commit #becd772
Use .nv-group{ fill-opacity: 1.0 !important; } to fill the area with the same color as the line
I was wondering is it possible to prevent only a one element in plot legend from disabling/enabling. Let's say I have three categories in my legend: 'car1', 'car2', 'car3'. I would like to show/hide only 'car2' and 'car3', while 'car1' is shown all the time.
Thank you!
If it's always a certain series that you want to disable show/hide, then within the legendItemClick return false for that series.
For example:
plotOptions: {
series: {
events: {
legendItemClick: function(event) {
return !(this.name == 'car1');
}
}
}
},