We Keep Coding

Chart.js bar chart mouse hovering highlights all the datasets instead of just the selected one

I have a very simple (horizontal) bar chart using Chart.js latest version.
https://codepen.io/decho/pen/abZYrxO
It has 3 datasets, Foo, Bar & Baz. The problem is that when I hover with the mouse over a bar (dataset), all 3 of them get highlighted instead of just the one that mouse is over at.
Current behavior:
Expected behavior:
I have tried playing with the tooltip settings, but couldn't quite figure it out. So any idea on how can I achieve this?
Here is my current Chart configuration, also on Codepen:
const ctx = document.getElementById('canvas').getContext('2d');
new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ['Test'],
datasets: [
{
label: 'Foo',
data: [1],
backgroundColor: 'rgba(23, 83, 139, 0.5)',
borderColor: '#17538b',
borderWidth: 2,
hoverBackgroundColor: "#17538b",
hoverBorderColor: "#4444442b",
},
{
label: 'Bar',
data: [2],
backgroundColor: 'rgba(255, 85, 33, 0.5)',
borderColor: '#ff5521',
borderWidth: 2,
hoverBackgroundColor: "#ff5521",
hoverBorderColor: "#4444442b",
},
{
label: 'Baz',
data: [3],
backgroundColor: 'rgba(62, 211, 241, 0.5)',
borderColor: '#3ed3f1',
borderWidth: 2,
hoverBackgroundColor: "#3ed3f1",
hoverBorderColor: "#4444442b",
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
position: 'bottom',
},
tooltips: {
mode: 'dataset',
intersect: true
},
scales: {
xAxes: [
{
display: true,
ticks: {
beginAtZero: true,
},
},
],
yAxes: [{
display: false,
ticks: {
beginAtZero: true,
},
}],
}
},
});
Any help is kindly appreciated.
Solved this myself: Apparently there is a a global option for hover modes:
options: {
hover: {
mode: 'dataset',
}
}

If anyone wonders as me, how this could be done for chart of type: 'line', just add these options:
options: {
elements: {
point: {
hitRadius: 1,
}
},
tooltips: {
mode: 'single',
},
hover: {
mode: 'dataset',
intersect: false
}
}
and also don´t forget to add colors for highlighting (for each dataset obviously):
datasets: [
{
label: "A",
data: [12, 19, 3, 5, 2, 3],
borderWidth: 3,
borderColor: '#ec5e5f',
hoverBorderColor: '#e41a1c',
pointHoverBackgroundColor: "#fff",
lineTension: 0.5,
}
]
For full example check out this codepen

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>

Chart.js adds second lines values to first

I have bar/line chart on my page and there is two lines and four bar values.
The first line is average value, that is one straight line, so it is array that filled with same number. Second line has different values that are not related to first line number. The think is that the first line raises the second line?? When I click to enable the average line, then the second line goes to right place. Is this a bug or did I do something wrong?
Here is is the code:
var ctx_bar = document.getElementById("points").getContext('2d');
var average = Array.apply(null, Array(points_order[0].length)).map(Number.prototype.valueOf,glob_pisteet[4][3]);
trows_chart = new Chart(ctx_bar, {
type: 'bar',
data: {
labels: points_order[4],
datasets: [{
type: 'line',
label: 'average',
borderColor: 'rgb(50, 50, 0)',
borderWidth: 1,
fill: false,
radius: 0,
data: average
},{
type: 'line',
label: 'points/trow',
borderColor: 'rgb(255, 51, 51)',
borderWidth: 4,
fill: false,
data: points_order[5]
},{
type: 'bar',
label: 'first',
backgroundColor: 'rgb(0, 92, 230)',
stack: 'round 1',
data: points_order[0]
}, {
type: 'bar',
label: 'second',
backgroundColor: 'rgb(102, 163, 255)',
stack: 'round 1',
data: points_order[1]
}, {
type: 'bar',
label: 'third',
backgroundColor: 'rgb(230, 138, 0)',
stack: 'round 2',
data: points_order[2]
}, {
type: 'bar',
label: 'fourth',
backgroundColor: 'rgb(255, 194, 102)',
stack: 'round 2',
data: points_order[3]
}]
},
options: {
title:{
display:true,
text:"Drows"
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});

Well I found the reason:
If you have your options setting like this:
title:{
display:true,
text:"Heitot"
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
Then it will do that. As soon as you take this part:
yAxes: [{
stacked: true
}]
away or change stacked: true to false, then it acts like normal.

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

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