I draw tall charts on the page. This works great but I have a small problem, it seems to me that when I hover over it I don't get the date and time.
This is what my json looks like:
[{"measurement value":"measurement value","date":"date","data":["9/5/2022",14.6,"9/5/2022" ,14.8,"6 -9-2022",15.948,"2022/9/6",17.112,"2022/9/6",
My chart looks like this:
You see the balloon on the left, it shows the number 0: 14.6.14.6 is the value, which is fine, but 0 is a number for that value, like another point, giving
But how do I display the date and time that the number in the balloon belongs to?
我的图表代码是这样的:
$.getJSON("mfrmetingen300RG.json", function(data) { const processedData9 = []; for (let a = 0; a < data[0].data.length; a = 2) { processedData9.push([data[0].data[a], data[0].data[a 1]]); } data[0].data = processedData9; avg = ; StDev = ; Aantalwaarden9 = ; //Cp=(USL-LSL)/(6xstd.Dev) see.:https://www.easycalculation.com/statistics/learn-cp-cpk-calculator.php //Cpk = (USL-gemiddelde) / (3 x std.Dev) of (gemiddelde-LSL) / (3 x std.Dev) cpkl1 = (-)/(6*StDev); Cpk1High = (-avg)/(3*StDev); Cpk1Low = (avg-)/(3*StDev); chart9 = new Highcharts.Chart('container9',{ chart: { zoomType: 'x', type: 'line', marginRight: 130, marginBottom: 100, backgroundColor:'azure' }, rangeSelector: { buttons: [{ text: ' ', events: { click() { return false } } }, { text: '-', events: { click() { return false } } }] }, title: { useHTML: true, text: "Gemeten MFR waarde van PP 300R Grey Extrusie over de laatste " (Aantalwaarden9) " waarden.", x: -20 //center }, credits: { enabled: false }, subtitle: {text: 'Gem.=' avg.toFixed(2) ' Stdev=' StDev.toFixed(2) ' Cp=' cpkl1.toFixed(2) ' Cpk_High=' Cpk1High.toFixed(2) ' Cpk_Low=' Cpk1Low.toFixed(2) '',x: -20}, xAxis: { uniqueNames: false, type: 'category', title: { text: 'Datum' } }, yAxis: { "min":15, "max":23, title: { text: 'MFR' }, plotLines: [{ value: 0, width: 1, color: '#808080' }], plotLines: [{value: ,color: ,dashStyle: 'longdashdot',width: 2,label: {text: 'Minimum'}}, {value: ,color: ,dashStyle: 'longdashdot',width: 2,label: {text: 'Maximum'}}, {value: ,color: ,dashStyle: 'shortdash',width: 2,label: {text: 'Richtlijn'}}, {value: avg.toFixed(2),color: ,dashStyle: 'spline',width: 2,label: {text: 'Avg'}}, ] }, tooltip: { formatter: function() { return 'Meetwaarden
' this.x ': ' this.y; } }, legend: {layout: 'vertical',align: 'right',verticalAlign: 'top', x: -100,y: 0,floating: true,borderWidth: 0}, series: data, plotOptions: { line: { dataLabels: { enabled: true } } }, }); chart9.legend.allItems[0].update({name:'MFR'}); }, 1000); });```
Because you have
category
type xAxis, your category name is contained in thepoint.key
variable. So based on your example you only need to referencethis.key
Simplified demonstration:https://jsfiddle.net/BlackLabel/87bousnL/
API Reference:https://api.highcharts.com/highcharts/tooltip.headerFormat