How can I change the legend label without affecting my tooltip label?

Question

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 image enter 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>

Answer 1

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>