How to set axes' step size in Chart.js 2? - javascript

I created a simple line chart using chart.js with 3 Y axes:
https://codepen.io/anon/pen/dZVgKw
As you can see, the last one is going from 10 to 20 without any number between. How can I set step size here?
This is how I add an axe:
{
id: 'C',
type: 'linear',
position: 'left',
ticks: {
max: 10,
min: 20,
},
}
Thanks.

How can I set step size here?
Straight from the samples (Linear Scale, step size):
By setting a stepSize value.
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
},
ticks: {
min: 0,
max: 100,
// forces step size to be 5 units
stepSize: 5 // <----- This prop sets the stepSize
}
}]
}
Here's a live example:
var ctx = document.getElementById('chartJSContainer').getContext('2d')
new Chart(ctx, {
type: 'line',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false,
stepSize: 3
},
}]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

this.data = {
labels: Xaxis,
datasets: [
{
label: "Primary",
data:Primyaxis,
type: 'line',
borderColor:'#eddb1c',
backgroundColor:'#FFF3D6',
fill: false,
pointBorderColor: 'yellow',
pointBackgroundColor: 'yellow',
borderWidth: 1.5
},
{
label: "Secondary",
data: Secyaxis,
type: 'line',
borderColor:'#FF7A96',
backgroundColor:'#EAC3CC',
fill: false,
pointBorderColor: 'red',
pointBackgroundColor: 'red'
}
]
};
this.options = {
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Extra Distance Interval From Origin'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Percentage of Employees'
},
ticks: {
// min: 50,
max: 100,
// forces step size to be 5 units
stepSize: 2 // <----- This prop sets the stepSize
}
}]
},
pan: {
enabled: true,
},
zoom: {
enabled: true,
},
responsive: true,
}}

Related

chart.js zeroLineColor does not work as expected

I don't know if it is a regression or if I don't do it right.
I want my chart to get a black border. I found on another stackoverflow question that you need to add empty axes for that.
But I define the zeroLineColor for each of them, and this does nothing. The color is still the default.
Moreover, if I specify the gridLines color, it is that color that is used for the zeroLineColor.
Here is simple example: https://jsfiddle.net/2sLmoc1u/ No black border. Just gray or black with too much alpha
var chart = new Chart(ctx, {
type: 'line',
data: {
//labels: [ 1, 2, 3, 4, 5, 6],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
}]
},
options: {
responsive: false,
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
zeroLineColor: '#000',
color: '#999', // the bottom axes is grey instead of black
},
}, {
position: 'top',
ticks: {
display: false
},
gridLines: {
zeroLineColor: '#000' // this seems to do nothing
}
}],
yAxes: [{
ticks: {
display: false
},
gridLines: {
display: false,
drawTicks: false,
zeroLineColor: '#000'
}
}, {
position: 'right',
ticks: {
display: false
},
gridLines: {
display: false,
drawTicks: false,
zeroLineColor: '#000'
}
}],
}
}
});
This is how achieved the color of zero line.
Chart.defaults.scale.gridLines.color = "#FFFFFF"; //white
Since the line is horizontal it would seem (believe me, I agree with you) that you need to put the zerLineColor on the xAxes but you need to put it on the yAxes
yAxes: [
{
gridLines: {
zeroLineColor: '#000',
}
}
]
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: "rgba(0, 0, 0, 1)",
}]
Check with the above given data sets. It can convert the color of line to black.

Change color of X axis values to multi color values - Chart.js

I am using Chart.js (http://www.chartjs.org/docs/) for charting.
My type Chart is Bar.
Label of X axis have 4 lines.
I Change color of X axis values. color of values is one color.
But I want one line per color and color same like the bar color.
var barChartData = {
labels: [["Injection", 10, 20], // here I want to change the color
["Electronics", 5, 15],
["TOTAL", 15, 35]
],
datasets: [{
label: "2018",
backgroundColor: window.chartColors.orange,
yAxisID: 'A',
data: [10, 5, 15]
}, {
label: "2017",
backgroundColor: window.chartColors.green,
yAxisID: 'A',
data: [20, 15, 35]
}]
};
var canvas = document.getElementById('canvas').getContext('2d');
new Chart(canvas, {
type: 'bar',
data: barChartData,
options: {
scales: {
yAxes: [{
id: 'A',
type: 'linear',
position: 'left',
}, {
id: 'B',
type: 'linear',
position: 'right',
ticks: {
max: 100,
min: 0
}
}],
xAxes: [{
ticks: {
fontColor: "#222", // This here that I changed.
},
}]
}
}
})
I want to change color of labels are 10, 5, 15 is orange and 20, 15, 35 is green and Injection, Electronics, TOTAL is black
Can I do that? How?
var myData = [
["id1","test 11111","AA",1.95],
["id2","test 2","BB",1.94],
["id3","test 3","CC",1.93],
["id4","test 4","DD",1.93],
["id5","test 5","EE",1.91],
["id6","test 6","FF",1.90],
["id7","test 7","GG",1.82],
["id8","test 8","HH",1.85],
["id9","test 9","II",1.83],
["id10","test 10","JJ",1.79]
];
var ctx = $("#c");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
label: '# of Votes',
xAxisID:'modelAxis',
data: myData.map((entry)=>entry[3])
}]
},
options:{
scales:{
xAxes:[
{
id:'modelAxis',
type:"category",
ticks:{
//maxRotation:0,
autoSkip: false,
callback:function(label, x2, x3, x4){
return label;
}
},
labels:myData.map((entry=>entry[1]))
},
{
id:'groupAxis',
type:"category",
gridLines: {
display: false,
drawBorder: false,
drawOnChartArea: false,
offsetGridLines: false
},
ticks:{
padding:0,
maxRotation:0,
fontSize: 10,
fontColor: '#FF9090',
autoSkip: false,
callback:function(label){
return label;
}
},
offset: true,
labels:myData.map((entry=>entry[1]))
},{
id:'groupAxis2',
type:"category",
gridLines: {
display: false,
drawBorder: false,
drawOnChartArea: false,
offsetGridLines: false
},
scaleLabel:{
padding: 10,
},
ticks:{
padding:0,
fontSize: 10,
fontColor: '#AB64F4',
maxRotation:0,
autoSkip: false,
callback:function(label){
return label;
}
},
offset: true,
labels:myData.map((entry=>entry[1]))
}
],
yAxes:[{
ticks:{
beginAtZero:true
}
}]
}
}
});

Chart.js Vertically Aligned points on single x axis

I have a bit of a unique chart.js issue here whereas I'm attempting to plot points on a linear chart on a single X axis only. For a visual reference, this chart would look like a vertical line with multiple Y values on a single X value. So far I cannot get the charts.js scipt to not automatically space values across the width of the chart at 100%, even with all X values declared at 0. I've got the sample data set with basic filler with a 0 X Value for each in the following.
<script>
var chart = new Chart(linechart, {
type: 'line',
options: {
scales: {
xAxes: [{
gridLines: {
},
ticks: {
suggestedMin: 0,
},
}],
yAxes: [{
gridLines: {
},
ticks: {
suggestedMin: 0,
suggestedMax: 12,
stepSize: 0.5
},
}]
},
legend: {
}
},
data: {
datasets: [{
data: [{x: 0, y: 12}, {x: 0, y: 11}, {x: 0, y: 10}],
pointBackgroundColor: "rgba(193,46,12,0.5)",
pointBordercolor: "rgba(193,46,12,1)",
pointRadius: 5,
fill: true,
showLine: false
}]
}
});
</script>
The issue here is that the x-axis default type of a line chart is category. To turn this into linear, simply add type: 'linear' to the x-axis as follows:
options: {
scales: {
xAxes: [{
type: 'linear',
...
Please take a look at your amended code below and see how it works.
new Chart('myChart', {
type: 'line',
data: {
datasets: [{
label: 'Dataset',
data: [{ x: 0, y: 12 }, { x: 0, y: 11 }, { x: 0, y: 10 }],
pointBackgroundColor: "rgba(193,46,12,0.5)",
pointBordercolor: "rgba(193,46,12,1)",
pointRadius: 5,
fill: false,
}]
},
options: {
scales: {
xAxes: [{
type: 'linear',
gridLines: {},
ticks: {
suggestedMin: 0,
}
}],
yAxes: [{
gridLines: {},
ticks: {
suggestedMin: 0,
suggestedMax: 12,
stepSize: 0.5
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>

Chartjs only displaying first and last x-axis labels

I have a dataset which has around 60 x-axis labels. My line chart is not displaying all the labels in my x-axis.
var ctx = this.refs.basicXYChart;
var config = {
type: 'line',
data: {
xLabels: Object.keys(result),
yLabels: Object.values(result),
datasets: [{
label: this.state.report.definition.name,
data: Object.values(result),
backgroundColor: 'rgba(154, 208, 245, 0.5)',
borderWidth: 1,
pointStyle: 'circle',
pointBackgroundColor: 'rgb(77, 172, 237)',
pointRadius: 5,
pointHoverRadius: 10,
borderWidth: 1,
borderColor: '#000000'
}]
},
options: {
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: this.props.X_label
}
}],
yAxes: [{
position: 'left',
display: true,
scaleLabel: {
display: true,
labelString: this.props.Y_label
}
}]
}
}
};
if(y_type == 'category'){
config.options.scales.yAxes[0]['type'] = 'category';
}
var myChart = new Chart(ctx, config);
I also want to start the y-axis from 0
This is addressed in https://github.com/chartjs/Chart.js/issues/2801.
scales: {
xAxes: [{
ticks: {
autoSkip: false
}
}]
}
Which can be found in the documentation here: http://www.chartjs.org/docs/latest/axes/cartesian/#tick-configuration

Chart.js fix minimum axes?

This is my chart:
I'm reading the documentation looking for some explanation of how to set an' minimum axe for my chart. I wanted to start at 0, instead of 2000.
How can I do that?
This is my code:
var dataBar = {
labels: [dataChart[0]['mesReferencia'],dataChart[1]['mesReferencia'],dataChart[2]['mesReferencia']],
datasets: [{
label: "CPF's Enviados",
backgroundColor: "rgba(0,51,90,0.8)",
borderColor: "rgba(0,51,90,0.9)",
borderWidth: 2,
hoverBackgroundColor: "rgba(0,51,90,0.9)",
hoverBorderColor: "rgba(0,51,90,1)",
data: [dataChart[0]['cpfsEnviados'],dataChart[1]['cpfsEnviados'],dataChart[2]['cpfsEnviados']]
},
{
label: "Propostas Finalizadas",
backgroundColor: "rgba(0,130,229,0.8)",
borderColor: "rgba(0,130,229,0.9)",
borderWidth: 2,
hoverBackgroundColor: "rgba(0,130,229,0.9)",
hoverBorderColor: "rgba(0,130,229,1)",
data: [dataChart[0]['propostasFinalizadas'],dataChart[1]['propostasFinalizadas'],dataChart[2]['propostasFinalizadas']]
},
{
label: "Propostas Aprovadas",
backgroundColor: "rgba(43,139,74,0.8)",
borderColor: "rgba(43,139,74,0.9)",
borderWidth: 2,
hoverBackgroundColor: "rgba(43,139,74,0.9)",
hoverBorderColor: "rgba(43,139,74,1)",
data: [dataChart[0]['propostasAprovadas'],dataChart[1]['propostasAprovadas'],dataChart[2]['propostasAprovadas']]
}]
};
Thanks!
Set beginAtZero: true for ticks in your options. Here is an example:
var options = {
type: 'bar',
responsive: true,
legend: false,
animation: false,
scales: {
xAxes: [{
display: true,
gridLines: {
display: false
},
}],
yAxes: [{
display: true,
gridLines: {
display: false
},
ticks: {
beginAtZero:true
}
}]
}
};

Categories