Chartjs only displaying first and last x-axis labels - javascript

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

Related

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

impossible to remove scale from radar chart (chart.js)

I have been trying all day to remove the scale of a radar chart in chart js. Although the chart works just fine, nothing seems to be working to remove the scale. Unfortunately the documentation is not that helpful for that issue.
here is what the graph looks like. The scale looks the same everytime. Clearing cache from browser does not help either.
here is the code for the chart:
function setChart(){
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ['classA','classB','classC','classD'],
datasets: [{
label: 'revenue proportion per class',
data: [0.25, 0.3, 0.15, 0.3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
],
borderColor: ['rgba(255, 99, 132, 0.2)'],
borderWidth: 5
},
{
label: 'proportion of item quantity per class',
data: [0.25, 0.3, 0.15, 0.3],
backgroundColor: [
'rgba(54, 162, 235, 0.2)',
],
borderColor: ['rgba(54, 162, 235, 0.2)'],
borderWidth: 5
}
],
and the options:
options: {
scale: {
ticks:{
label: false,
min: 0,
max: 1,
fixedStepSize: 4,
showLabelBackdrop: false,
fontSize: 0,
color: "#eee"
}
}
options: {
scale: {
ticks:{
display: false
}
}
I am doing something stupid? Any help on that would be welcomed!

options: {
scales: {
r: {
pointLabels: {
display: false // Hides the labels around the radar chart
},
ticks: {
display: false // Hides the labels in the middel (numbers)
}
}
}
}

The linear radial axis documentation lists four configuration options (as of v2.9.3):
angleLines
gridLines
pointLabels
ticks
Each of these is an object that supports the display property. Specifying display: false in all four objects removes the scale.
options: {
scale: {
angleLines: {
display: false
},
gridLines: {
display: false
},
pointLabels: {
display: false
},
ticks: {
display: false
},
}
}
Here's a working example:
new Chart('myChart', {
type: 'radar',
data: {
labels: ['A', 'B', 'C', 'D'],
datasets: [{
label: 'Series 1',
data: [0.25, 0.3, 0.15, 0.3],
}]
},
options: {
scale: {
angleLines: {
display: false
},
gridLines: {
display: false
},
pointLabels: {
display: false
},
ticks: {
display: false
},
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.3/dist/Chart.min.js"></script>
<canvas id="myChart"></canvas>

Can't generate multi-axis combo chart (bar/line) using chart.js 2.7

I've been having problems trying to generate a combo bar/line chart using chart.js 2.7.2.
Currently I can render the chart, however the bars are not visible, as shown in the attached picture.
Combo Chart with problem
Please note that in the above picture, "Data1" corresponds to the line chart to be plotted on the left Y axis, and "Data2" corresponds to the bar chart to be plotted on the right Y axis.
Also note that the tooltip does show the "Data2" series, however it's not visible on the chart!
Below the javascript code used to generate the chart. It uses a canvas within a simple html document.
var x_time = ['00:00', '00:30', '01:00', '01:30', '02:00', '02:30'];
var y_data1 = ['99.83', '99.86', '99.81', '99.83', '99.72', '99.75'];
var y_data2 = ['56', '41', '53', '46', '70', '60'];
new Chart(document.getElementById('myChart').getContext('2d'), {
data: {
labels: x_time,
datasets: [{
type:'line',
label: 'Data1',
fill:false,
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: y_data1,
yAxisID: 'left-axis'
}, {
type: 'bar',
label: 'Data2',
fill: true,
backgroundColor: 'rgb(54, 162, 235)',
borderColor: 'rgb(54, 162, 235)',
data: y_data2,
yAxisID: 'right-axis'
}]
},
options: {
legend: {position:'bottom', usePointStyle:true},
maintainAspectRatio:false,
responsive: true,
title: {display: false},
tooltips: {mode: 'index', intersect: false},
hover: {mode: 'nearest', intersect: true},
scales: {
xAxes: [{display: true, stacked:true, scaleLabel: {display: false, labelString: 'time'}}],
yAxes: [{
type:'linear',
id:'left-axis',
display: true,
position: 'left',
scaleLabel: {display: true, labelString: '%'}
},{
type:'linear',
id:'right-axis',
display: true,
position: 'right',
stacked:false,
scaleLabel: {display: true, labelString: '#'},
gridLines: {drawOnChartArea:false}
}]
}
}
});
Any help on this would be greatly appreciated.

need to define the overall chart type, at the top level,
then you change one of the types at the dataset level
new Chart(document.getElementById('myChart').getContext('2d'), {
type: 'bar', // <-- define overall chart type - top level
data: {
labels: x_time,
datasets: [{
type:'line', // <-- define dataset type
...
see following working snippet...
var x_time = ['00:00', '00:30', '01:00', '01:30', '02:00', '02:30'];
var y_data1 = ['99.83', '99.86', '99.81', '99.83', '99.72', '99.75'];
var y_data2 = ['56', '41', '53', '46', '70', '60'];
new Chart(document.getElementById('myChart').getContext('2d'), {
type: 'bar', // <-- define overall chart type
data: {
labels: x_time,
datasets: [{
type:'line',
label: 'Data1',
fill:false,
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: y_data1,
yAxisID: 'left-axis'
}, {
label: 'Data2',
fill: true,
backgroundColor: 'rgb(54, 162, 235)',
borderColor: 'rgb(54, 162, 235)',
data: y_data2,
yAxisID: 'right-axis'
}]
},
options: {
legend: {position:'bottom', usePointStyle:true},
maintainAspectRatio:false,
responsive: true,
title: {display: false},
tooltips: {mode: 'index', intersect: false},
hover: {mode: 'nearest', intersect: true},
scales: {
xAxes: [{display: true, stacked:true, scaleLabel: {display: false, labelString: 'time'}}],
yAxes: [{
type:'linear',
id:'left-axis',
display: true,
position: 'left',
scaleLabel: {display: true, labelString: '%'}
},{
type:'linear',
id:'right-axis',
display: true,
position: 'right',
stacked:false,
scaleLabel: {display: true, labelString: '#'},
gridLines: {drawOnChartArea:false}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>

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

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,
}}

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