I am trying to find a solution to my problem. I have changed the legend label into 25th - 75th Percentile. So far so good this is correct. However, the problem arises when I hover over the line. It should be 75th Percentile when I am on top and not 25th - 75th Percentile. This is an issue that I could not figure out yet. I hope you can help me out. Additionally, I want to make this for each line so in case I have 10th - 90th Percentile. I want to hover over the two lines and get 90th percentile or 10th Percentile. I also attach an imageenter image description here
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.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 config = { //configure the chart
type: 'line',
data: {
labels: ['0', '1', '2', '3','4','5','6','7','8','9+'],
datasets: [{
label: "25th Percentile",
showInLegend: true,
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",
tooltipTitle:"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: [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]
}]
},
options: {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("10th - 90th Percentile" & "10th Percentile");}}},
spanGaps: false,
elements: {
line: {
tension: 0.000001
}
},
plugins: {
filler: {
propagate: false
}
},
scales: {
yAxes: [{gridLines: {display:false}, scaleLabel: {display: true, labelString: 'Salary',
fontSize:20},
ticks: {beginAtZero:true, stepSize: 20,callback: function(value, index, values) {
return '$' + value.toFixed(decimals)}
}
}], xAxes: [{gridLines: {display:false},
ticks: {beginAtZero:true, stepSize: 20,
}, scaleLabel: {
display: true,
labelString: 'Years of relevant experience',
fontSize: 20 }
}]
}
}
};
var chart = new Chart(ctx, config);
</script>
tooltipTitle is not a property in chart.js. To adjust the title you will have to implement a custom callback like this:
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: "
}
if (label === "10th - 90th Percentile: ") {
label = "90th Percentile: "
}
label += tooltipItem.yLabel
return label;
}
}
}
}
Example:
<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 config = { //configure the chart
type: 'line',
data: {
labels: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9+'],
datasets: [{
label: "25th Percentile",
showInLegend: true,
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.1,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
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]
}
]
},
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("10th - 90th Percentile" & "10th Percentile");
}
}
},
spanGaps: false,
elements: {
line: {
tension: 0.000001
}
},
plugins: {
filler: {
propagate: false
}
},
scales: {
yAxes: [{
gridLines: {
display: false
},
scaleLabel: {
display: true,
labelString: 'Salary',
fontSize: 20
},
ticks: {
beginAtZero: true,
stepSize: 20,
callback: function(value, index, values) {
return '$' + value.toFixed(decimals)
}
}
}],
xAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true,
stepSize: 20,
},
scaleLabel: {
display: true,
labelString: 'Years of relevant experience',
fontSize: 20
}
}]
}
}
};
var chart = new Chart(ctx, config);
</script>