We Keep Coding

chartjs 3.6.0 add X label

I used following code in Chart 2.2.1 and it worked well and we can see label Time.
Now we want to upgrade to 3.6.0 due to security reasons, but snippet stopped working. I attach 2 fiddles
Working 2.2.1: https://jsfiddle.net/maksim_beliaev/2ru3g5ot/8/
Not working 3.6.0: https://jsfiddle.net/maksim_beliaev/q2poncyd/5/
How can I set label for X and Y axis with new chartjs? In online docs for Axis and Labels looks like that syntax should be correct
function create_line_chart(ctx, x_axis, version_1, y_axis_1, version_2, y_axis_2) {
new Chart(ctx, {
type: 'line',
data: {
labels: x_axis,
type: 'line',
defaultFontFamily: 'Montserrat',
datasets: [{
label: version_1,
data: y_axis_1,
backgroundColor: 'transparent',
borderColor: 'rgba(220,53,69,0.75)',
borderWidth: 3,
pointStyle: 'circle',
pointRadius: 5,
pointBorderColor: 'transparent',
pointBackgroundColor: 'rgba(220,53,69,0.75)',
}, {
label: version_2,
data: y_axis_2,
backgroundColor: 'transparent',
borderColor: 'rgba(40,167,69,0.75)',
borderWidth: 3,
pointStyle: 'circle',
pointRadius: 5,
pointBorderColor: 'transparent',
pointBackgroundColor: 'rgba(40,167,69,0.75)',
}]
},
options: {
responsive: true,
tooltips: {
mode: 'index',
titleFontSize: 12,
titleFontColor: '#000',
bodyFontColor: '#000',
backgroundColor: '#fff',
titleFontFamily: 'Montserrat',
bodyFontFamily: 'Montserrat',
cornerRadius: 3,
intersect: false,
},
legend: {
display: false,
labels: {
usePointStyle: true,
fontFamily: 'Montserrat',
},
},
scales: {
xAxes: [{
display: true,
gridLines: {
display: false,
drawBorder: false
},
scaleLabel: {
display: true,
labelString: 'Time'
}
}],
yAxes: [{
display: true,
gridLines: {
display: false,
drawBorder: false
},
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
},
title: {
display: false,
text: 'Normal Legend'
}
}
});
}
var ctx = document.getElementById( "canvas" );
ctx.height = 150;
create_line_chart(ctx, [2010, 2011, 2012, 2013, 2014, 2015, 2016],
194,
[0, 30, 10, 120, 50, 63, 10],
221,
[0, 50, 40, 80, 40, 79, 120],
);

Chart.js v3 has lots of API changes from Chart.js v2, you should pass your title configuration like this:
const titleConfig = {
scales: {
x: {
display: true,
title: {
display: true,
text: "Time",
padding: { top: 20, left: 0, right: 0, bottom: 0 },
},
},
y: {
display: true,
title: {
display: true,
text: "Value",
padding: { top: 30, left: 0, right: 0, bottom: 0 },
},
},
},
};
More information on how to use title configuration can be found on the documentation.
Here's a working fiddle: https://jsfiddle.net/vkghzxLc/15/

Basicly your whole options object is wrong, there are some major breaking changes in chart.js v3. For all changes please read the migration guide.
For the scale label to show you need to configure it in options.scales.x.title.text, also the tooltip and legend need to be configured in the plugins namespace, tooltip has been made singular

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.

Modify the legend of a double doughnut with chart js

I'm trying to create a legend for a doughnut chart created with chart js. The problem is I have two doughnut charts stacked and when creating the legend it defaults to the labels of the first.
I want the legend to show up with the blue label as CPU and a green label as MEM.
Currently the labels when hovering on either doughnut is free and used which I'd like to keep.
here is the script used to create the chart
var responseChartLoad = new Chart(responseChartCanvas, {
type: 'doughnut',
data: {
labels: ["Used", "Free"],
datasets: [{
data: [0, 100],
backgroundColor: [
'#42a5f5',
'#eceff1',
],
borderColor: [
'#FFF',
'#FFF'
],
borderWidth: 2
}, {
data: [0, 100],
backgroundColor: [
'#4db6ac',
'#eceff1',
],
borderColor: [
'#FFF',
'#FFF'
],
borderWidth: 2
}]
},
options: {
responsive: true,
cutoutPercentage: 50,
animation: {
animateRotate: true
},
legend: {
display: true,
position: 'bottom'
},
elements: {
center: {
text: 'CPU/MEM',
fontStyle: 'Helvetica', //Default Arial
sidePadding: 50 //Default 20 (as a percentage)
}
}
}
});

To accomplish that you would have to generate custom legend items, which could be done using the generateLabels method of legend­'s labels, as such :
legend: {
labels: {
generateLabels: function() {
return [{
text: 'CPU',
fillStyle: '#42a5f5',
strokeStyle: '#fff'
}, {
text: 'MEM',
fillStyle: '#4db6ac',
strokeStyle: '#fff'
}];
}
}
}
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
var responseChartLoad = new Chart('responseChartCanvas', {
type: 'doughnut',
data: {
labels: ["Used", "Free"],
datasets: [{
data: [10, 100],
backgroundColor: [
'#42a5f5',
'#eceff1',
],
borderColor: [
'#FFF',
'#FFF'
],
borderWidth: 2
}, {
data: [5, 100],
backgroundColor: [
'#4db6ac',
'#eceff1',
],
borderColor: [
'#FFF',
'#FFF'
],
borderWidth: 2
}]
},
options: {
responsive: true,
cutoutPercentage: 50,
animation: {
animateRotate: true
},
legend: {
display: true,
position: 'bottom',
labels: {
generateLabels: function() {
return [{
text: 'CPU',
fillStyle: '#42a5f5',
strokeStyle: '#fff'
}, {
text: 'MEM',
fillStyle: '#4db6ac',
strokeStyle: '#fff'
}];
}
}
},
elements: {
center: {
text: 'CPU/MEM',
fontStyle: 'Helvetica', //Default Arial
sidePadding: 50 //Default 20 (as a percentage)
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="responseChartCanvas"></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
}
}]
}
};