Related
I am looking for a solution to load my line chart as soon as I click on different tabs. In this case, I need to admit that I use Webflow as my platform and based on that I embed my code so even if you do not see any tabs in my code I can easily link it to my Webflow Tabs. Hope you can help me out to fit it into my almost finished product. Attached you find an image:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<div class="wrapper" id='front-end-engineer' style="height:600px;position: relative;margin-top:50px;">
<canvas id="mychart2" style="display: block; width: 958px; height: 478px;"></canvas>
</div>
<script>
var canvas2 = document.getElementById("mychart2");
var ctx2 = canvas2.getContext('2d');
const decimals2 = 0;
var config2 = {
type: 'line',
data: {
labels: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9+'],
datasets: [{
label: "25th Percentile",
backgroundColor: '#c4c1ff',
pointBackgroundColor: "#645bff",
borderColor: '#645bff',
fill: 4,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3, //no fill here
data: [31, 32, 35, 42, 50, 50, 58, 60, 74]
}, {
label: "10th - 90th Percentile",
backgroundColor: '#c4c1ff',
pointBackgroundColor: "#c4c1ff",
borderColor: '#c4c1ff',
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
borderWidth: 1,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
fill: 3,
//no fill here
data: [36, 45, 45, 55, 55, 59, 75, 85, 119]
}, {
label: "Median",
backgroundColor: '#0d0e25',
pointBackgroundColor: "#0d0e25",
borderColor: '#0d0e25',
borderWidth: 1,
pointRadius: 2,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
fill: false, //no fill here
data: [31, 38, 40, 45, 50, 55, 60, 75, 90]
},
{
label: "25th - 75th Percentile",
showInLegend: false,
backgroundColor: '#645bff',
pointBackgroundColor: "#645bff",
borderColor: '#645bff',
pointRadius: 0,
lineTension: 0.1,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
fill: 0,
//fill until previous dataset
data: [34, 42, 45, 50, 54, 58, 66, 80, 110]
}, {
label: "10th Percentile",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#c4c1ff",
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
borderColor: "#c4c1ff",
pointStyle: "circle",
borderWidth: 1,
lineWidth: 1,
hoverRadius: 9,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
lineTension: 0.3,
fill: '0',
data: [25, 30, 36, 39, 45, 49, 53, 56, 60, 68]
}
]
},
options: {responsive:true,maintainAspectRatio:false,
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
if (label === "25th - 75th Percentile: ") {
label = "75th Percentile: "
}
if (label === "10th - 90th Percentile: ") {
label = "90th Percentile: "
}
label += tooltipItem.yLabel
return label;
}
}
},
title: {
display: true,
text: 'Backend Engineer salaries (1242 datapoints)',
fontSize: 20,position:'top'
},
maintainAspectRatio: false,
legend: {
onClick: (e) => e.stopPropagation(),
display: true,
labels: {
filter: function(item,
mychart2) {
return item.datasetIndex !== 0 && item.datasetIndex !== 4;
}
}
},
spanGaps: false,
elements: {
line: {
tension: 0.000001
}
},
plugins: {
filler: {
propagate: false
}
},
scales: { yAxes: [{
id: 'a',
type: 'linear',
position: 'left',
gridLines: {
drawOnChartArea:false
},
scaleLabel: {
display: true,
labelString: 'Salary',
fontSize: 20
},
ticks: {
beginAtZero: true,
stepSize: 20,
callback: function(value, index, values) {
return '$' + value.toFixed(decimals)
}
}
}, {
id: 'b',
type: 'linear',
position: 'right',
ticks: {
display: false},
gridLines: {
lineWidth:0.5
},
scaleLabel: {
display: false
},
ticks: {
display: false,
beginAtZero: true,
stepSize: 20
}
}] ,xAxes: [{
gridLines: {
drawOnChartArea:false
},
ticks: {
beginAtZero: true,
stepSize: 20,
},
scaleLabel: {
display: true,
labelString: 'Years of relevant experience',
fontSize: 20
}
}]
}
}
};
var chart2 = new Chart(ctx2, config2);
</script>
Hey guys I have created a line chart that is almost done. The only thing that annoys me is the fact that there is some white space on the right-hand side of the graph. I would like to create a vertical line that does not go through the dots. It should be a smooth line without affecting the dots at the end of the line chart
enter image description here
[<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<canvas id="mychart2" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("mychart2");
var ctx = canvas.getContext('2d');
const decimals = 0;var originalLineDraw = Chart.controllers.line.prototype.draw;
Chart.helpers.extend(Chart.controllers.line.prototype, {
draw: function() {
originalLineDraw.apply(this, arguments);
var chart = this.chart;
var ctx = chart.chart.ctx;
var index = chart.config.data.lineAtIndex;
if (index) {
var xaxis = chart.scales\['x-axis-0'\];
var yaxis = chart.scales\['y-axis-0'\];
ctx.save();
ctx.beginPath();
ctx.moveTo(xaxis.getPixelForValue(undefined, index), yaxis.top);
ctx.strokeStyle = '#F6F6F6';
ctx.lineWidth = 1;
ctx.borderDashOffset = 0.0;
ctx.color = 'rgba(0, 0, 0, 1)';
ctx.zeroLineColor = "rgba(0, 0, 0, 0.25)";
ctx.tickMarkLength = 10;
ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.bottom);
ctx.stroke();
ctx.restore();
}
}
});
var config = { //configure the chart
type: 'line',
data: {
labels: \['0', '1', '2', '3', '4', '5', '6', '7', '8', '9+'\],
datasets: \[{
label: "25th Percentile",
showInLegend: false,
backgroundColor: '#c4c1ff',
pointBackgroundColor: "#645bff",
borderColor: '#645bff',
fill: 4,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3, //no fill here
data: \[28, 35, 40, 45, 50, 55, 62, 66, 70, 78\]
}, {
label: "90th Percentile",
backgroundColor: '#c4c1ff',
pointBackgroundColor: "#c4c1ff",
borderColor: '#c4c1ff',
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
borderWidth: 1,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
fill: 3,
//no fill here
data: \[40, 65, 63, 64, 72, 79, 83, 87, 100, 108\]
}, {
label: "Median",
backgroundColor: '#0d0e25',
pointBackgroundColor: "#0d0e25",
borderColor: '#0d0e25',
borderWidth: 1,
pointRadius: 2,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
fill: false, //no fill here
data: \[30, 40, 45, 50, 56, 60, 66, 73, 78, 85\]
},
{
label: "25th - 75th Percentile",
showInLegend: false,
backgroundColor: '#645bff',
pointBackgroundColor: "#645bff",
borderColor: '#645bff',
pointRadius: 0,
lineTension: 0.5,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
borderCapStyle: 'butt',
borderDash: \[\],
borderDashOffset: 0.1,
borderJoinStyle: 'miter',
fill: 0,
//fill until previous dataset
data: \[35, 50, 51, 55, 63, 69, 73, 80, 85, 94\]
}, {
label: "10th Percentile",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#c4c1ff",
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
borderColor: "#c4c1ff",
pointStyle: "circle",
borderWidth: 1,
lineWidth: 1,
hoverRadius: 9,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
lineTension: 0.3,
fill: '0', //fill until previous dataset
data: \[25, 30, 36, 39, 45, 49, 53, 56, 60, 68\]
}
\], lineAtIndex: 9
},
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets\[tooltipItem.datasetIndex\].label || '';
if (label) {
label += ': ';
}
if (label === "25th - 75th Percentile: ") {
label = "75th Percentile: "
}
label += tooltipItem.yLabel
return label;
}
}
},
title: {
display: true,
text: 'Frontend Engineer salaries (753 datapoints)',
fontSize: 20
},
maintainAspectRatio: false,
legend: {
onClick: (e) => e.stopPropagation(),
display: true,
labels: {
filter: function(item,
mychart2) {
return !item.text.includes("25th Percentile" & "10th Percentile")
}
}
},
spanGaps: false,
elements: {
line: {
tension: 0.1
}
},
plugins: {
filler: {
propagate: false
}
},
scales: {
yAxes: \[{
gridLines: {drawOnChartArea:false
},
scaleLabel: {
display: true,
labelString: 'Salary',
fontSize: 20
},
ticks: {
beginAtZero: true,
stepSize: 20,
callback: function(value, index, values) {
return '$' + value.toFixed(decimals)
}
}
}\],
xAxes: \[{
gridLines: {drawOnChartArea:false
},
ticks: {
beginAtZero: true,
stepSize: 20,
},
scaleLabel: {
display: true,
labelString: 'Years of relevant experience',
fontSize: 20
}
}\]
}
}
};
var chart = new Chart(ctx, config)
</script>][1]
how should the vertical line look like?
do you mean the median line?
it would be helpful, if you can show us what kind of vertical line you mean, or at least tell us a function, so we know how the line should look like
EDIT:
You can add a 2nd yAxis to the right side.
Replace this for yAxes:
yAxes: [{
id: 'a',
type: 'linear',
position: 'left',
gridLines: {
drawOnChartArea:false
},
scaleLabel: {
display: true,
labelString: 'Salary',
fontSize: 20
},
ticks: {
beginAtZero: true,
stepSize: 20,
callback: function(value, index, values) {
return '$' + value.toFixed(decimals)
}
}
}, {
id: 'b',
type: 'linear',
position: 'right',
gridLines: {
drawOnChartArea:false
},
scaleLabel: {
display: false
},
ticks: {
display: false,
beginAtZero: true,
stepSize: 1
}
}]
I have a line graph and I want to alter it's tooltip. I want it, on hover, to show the follow (as an example):
Question: This is question 1
Your answers: 3
Average answers: 7
Your average: 5
Average: 7
The data in the tooltip is fine and works. See this fiddle here
What I'm trying to do is to add to the tooltip so that it can display the question in it too.
What I've tried:
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var dataset=data.datasets[tooltipItem.datasetIndex];
return data.datasets[tooltipItem.datasetIndex].label+ ' : ' +dataset.data[tooltipItem.index]+questions[i];
}
}
}
var q1 = "This is question 1";
var q2 = "This is question 2";
var q3 = "This is question 3";
var q4 = "This is question 4";
var q5 = "This is question 5";
var questions = [q1, q2, q3, q4, q5];
var questionsArrayLength = questions.length;
for (var i = 0; i < questionsArrayLength; i++) {
console.log(questions[i]);
}
var canvas = document.getElementById('chart');
canvas.height = 500;
var data = {
labels: ["Q1", "Q2", "Q3", "Q4", "Q5"],
datasets: [{
label: "Your answers",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "rgba(75,192,192,1)",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 5,
decimals: false,
pointHitRadius: 10,
data: [1,3,4,5,3],
stack: 4
},
{
label: "Average answers",
fill: false,
lineTension: 0.1,
borderColor: "rgba(79,104,241,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "rgba(79,104,241,1)",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(79,104,241,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 5,
decimals: false,
pointHitRadius: 10,
data: [2, 7, 5, 10, 3],
stack: 5
},
{
label: "Your average",
pointStyle: 'line',
fill: false,
borderColor: "#ffffff",
borderCapStyle: 'round',
borderDash: [0.5, 5],
borderDashOffset: 1,
lineTension: 0.1,
data: [5, 5, 5, 5, 5],
},
{
label: "Average",
pointStyle: 'line',
fill: false,
borderColor: "#ffffff",
borderCapStyle: 'round',
borderDash: [5, 8],
borderDashOffset: 0.6,
lineTension: 0.1,
data: [7, 7, 7, 7, 7],
},
]
};
var options = {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var dataset=data.datasets[tooltipItem.datasetIndex];
return data.datasets[tooltipItem.datasetIndex].label+ ' : ' +dataset.data[tooltipItem.index]+questions[i];
}
}
},
plugins: {
filler: {
propagate: true
}
},
responsive: true,
maintainAspectRatio: false,
tooltips: {
mode: 'index'
},
showLines: true,
scales: {
yAxes: [{
gridLines: {
color: 'rgb(255, 255, 255)',
z: 2
},
scaleLabel: {
display: true,
labelString: 'Scores'
},
stacked: false,
ticks: {
beginAtZero: 0,
suggestedMin: 1,
suggestedMax: 10,
stepSize: 2,
userCallback: function(label, index, labels) {
// when the floored value is the same as the value we have a whole number
if (Math.floor(label) === label) {
return label;
}
},
}
}],
xAxes: [{
gridLines: {
color: 'rgb(255, 255, 255)',
z: 2
},
scaleLabel: {
display: true,
labelString: 'Questions'
},
}]
},
annotation: {
annotations: [
{
drawTime: "beforeDatasetsDraw",
type: "box",
id: "n",
xScaleID: "x-axis-0",
yScaleID: "y-axis-0",
xMin: "Q1",
xMax: "Q5",
yMin: 0,
yMax: 3.7,
backgroundColor: "rgba(26,26,26,0.6)",
borderColor: "rgba(26,26,26,0.6)",
borderWidth: 1,
},
{
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-0",
yScaleID: "y-axis-0",
xMin: "Q1",
xMax: "Q5",
yMin: 3.7,
yMax: 7,
backgroundColor: 'rgba(88,88,88,0.6)',
borderColor: 'rgba(88,88,88,0.6)',
borderWidth: 1,
},
{
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-0",
yScaleID: "y-axis-0",
xMin: "Q1",
xMax: "Q5",
yMin: 7,
yMax: 10,
backgroundColor: 'rgba(31,42,97,0.6)',
borderColor: 'rgba(88,88,88,0.6)',
borderWidth: 0
}
]
}
};
var myLineChart = Chart.Line(document.getElementById('chart'), {
data: data,
options: options
});
.wrap { background-color:#000; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.5/chartjs-plugin-annotation.js"></script>
<div class="wrap">
<canvas id="chart"></canvas>
</div>
You have to define a callback function to change the tooltip title as follows.
tooltips: {
mode: 'index',
callbacks: {
title: tooltipItem => 'Question: ' + questions[tooltipItem[0].index]
}
}
Please check the amended JSFiddle
I'm running ChartJS 2.7.something, and have https://codepen.io/anon/pen/YBJWKX this graph. Code below:
var ctx = document.getElementById("chart");
Chart.controllers.LineWithLine = Chart.controllers.line.extend({
draw: function(ease) { Chart.controllers.line.prototype.draw.call(this, ease);
if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
let activePoint = this.chart.tooltip._active[0],
ctx = this.chart.ctx,
x = activePoint.tooltipPosition().x,
topY = this.chart.scales['y-axis-a'].top,
bottomY = this.chart.scales['y-axis-a'].bottom;
// draw line
ctx.save();
ctx.beginPath();
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.lineWidth = 1;
ctx.strokeStyle = 'rgba(52,58,64,1)';
ctx.stroke();
ctx.restore();
}
}
});
var dashboard = new Chart(ctx, {
type: 'bar',
data: {
responsive: true,
labels: ["1", "2", "3", "4", "5", "6", "7"],
datasets: [{
label: 'No Data',
yAxisID: 'y-axis-a',
data: [null,null,4000, null, null, 4000, null],
backgroundColor: 'rgba(229,229,229,1)',
borderWidth: '0',
borderSkipped: 'bottom',
hoverBackgroundColor: 'rgba(229,229,229,1)',
hoverBorderWidth: '0',
showTooltip: false,
},
{
type: 'LineWithLine',
label: 'Dummy 1',
fill: false,
yAxisID: 'y-axis-a',
data: [2586, 2343, 2380, 2439, 3316, 1570, 3439],
borderColor: 'rgba(220,53,69,1)',
backgroundColor: 'rgba(220,53,69,1)',
borderWidth: 3,
borderCapStyle: 'butt',
pointRadius: 2,
pointBorderWidth: 0,
pointHoverRadius: 1,
pointHitRadius: 10,
lineTension: 0.1, // Removes Bezier on Line
},
{
type: 'LineWithLine',
label: 'Dummy 2',
fill: false,
yAxisID: 'y-axis-a',
data: [3466, 1295, 3015, 2351, 3305, 1167, 1350],
borderColor: 'rgba(40, 167, 69,1)',
backgroundColor: 'rgba(40, 167, 69,1)',
borderWidth: 3,
borderCapStyle: 'butt',
pointRadius: 2,
pointBorderWidth: 0,
pointHoverRadius: 1,
pointHitRadius: 10,
lineTension: 0.1, // Removes Bezier on Line
},
{
type: 'LineWithLine',
label: 'Dummy 3',
fill: false,
yAxisID: 'y-axis-b',
data: [1, 8, 17, 6, 12, 4, 7],
borderColor: 'rgba(0, 123, 255,1)',
backgroundColor: 'rgba(0, 123, 255,1)',
borderWidth: 3,
borderCapStyle: 'butt',
pointRadius: 2,
pointBorderWidth: 0,
pointHoverRadius: 1,
pointHitRadius: 10,
lineTension: 0.1, // Removes Bezier on Line
},
]
},
options: {
bezierCurve: false,
maintainAspectRatio:false,
legend: {
labels: {
filter: function(item, dashboard) {
// Logic to remove a particular legend item goes here
return !item.text.includes('No Data');
}
}
},
tooltips: {
mode: 'index',
intersect: false,
//enabled: false,
},
scales: {
yAxes: [{
position: "left",
id: "y-axis-a",
ticks: {
suggestedMax: 3600,
}
},
{
position: "left",
id: "y-axis-b",
max: 25,
display: false,
gridLines: {
display:false
}
}],
},
xAxes: [{ }]
}
});
It's almost perfect for what i need it for, however:
In this particular case I would like to remove the "No Data" grey bars from the tooltip where it's values are NULL.
At the same time, i would also like to remove the tooltip entirely where it's value is not NULL, ie disabled.
I'm using the tooltip in index mode with intersect turned to false so that the black line that is on the graph works, the black line came from this question.
I've tried a range of things from stackoverflow, but I have a feeling that none of the things i've tried have worked because of how the tooltip is set up.
Is it at all possible to do what I need here?
Just change your options parameter a little bit.
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
//returns a empty string if the label is "No Data"
label: function(items, data){
let dataset = data.datasets[items.datasetIndex];
if(dataset.label !== "No Data") {
return `${dataset.label}: ${items.yLabel}`
} else {
return ""
}
},
//only returns something when at least one dataset yLabel is a valid number.
title: function(t, e) {
let shouldDisplay = false;
t.forEach((it) => {
if(!isNaN(it.yLabel)) shouldDisplay = true;
});
if(shouldDisplay) {
return t[0].xLabel;
}
}
}
},
There is probably a better way to optimize this, but I hope it helps
I have the below mixed chart, with bars & lines:
Below the code that generate the above chart:
var data = [{
label: 'Varience 1',
data: [15, -6, -6, 7],
borderColor: '#03A9F4',
pointBackgroundColor: '#03A9F4',
pointBorderWidth: 2,
pointStyle: 'rect',
type: 'line',
steppedLine: true,
borderWidth: 2
}, {
label: 'Varience 2',
data: [24, -2, 3, 19],
borderColor: '#FF5722',
pointBackgroundColor: '#FF5722',
pointBorderWidth: 2,
pointStyle: 'rect',
type: 'line',
steppedLine: true,
borderWidth: 2
}, {
label: 'Available',
data: [72, 62, 55, 65],
borderDash: [5, 5],
borderColor: '#bbb',
pointBackgroundColor: '#bbb',
pointBorderWidth: 2,
borderWidth: 2,
type: 'line'
}, {
label: 'Budget',
data: [50, 55, 45, 51],
borderDash: [5, 5],
borderColor: '#f0ab00',
pointBackgroundColor: '#fff',
pointBorderWidth: 2,
borderWidth: 2,
type: 'line'
}, {
label: 'Actual',
data: [65, 49, 39, 58],
backgroundColor: '#607D8B',
pointBorderWidth: 3,
borderWidth: 3
}, {
label: 'Last Year',
data: [41, 51, 36, 39],
borderColor: '#607D8B',
backgroundColor: 'rgba(96, 125, 139, 0.25)',
pointBorderWidth: 3,
borderWidth: 3
}];
data.forEach(function (obj) {
obj.fill = 'false';
});
Below the code to show the custom tooltip:
tooltips: {
callbacks: {
label: function tooltipWithoutTotal(tooltipItem, data) {
var type = data.datasets[tooltipItem.datasetIndex].label;
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
if (tooltipItem.datasetIndex !== data.datasets.length - 1) {
return type + " : " + value.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '1,');
} else {
return [type + " : " + value.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '1,')];
}
}
}
}
With the above tooltip code I expected to list all the values in the tooltip (like this: https://jsfiddle.net/kingBethal/r23y0h6n/).
However, in the tooltip it is showing only individual values.
Here is the JSFiddle: https://jsfiddle.net/kingBethal/dqpusowy/6/
Set the tooltip interaction mode to index:
options = {
tooltips: {
mode: 'index'
}
}
Result:
The new syntax for Chart JS 3+ :
options: {
interaction: {
intersect: false,
mode: 'index',
}
}