CODEWITHSUNDEEP
chart.jsreact-chartjs
2lean4
2lean4

Reputation: 25

ChartJS Tooltips with time axis and multiple datasets

So i have a bar chart set up to display two different datasets that take place at more or less the same time, but have some missing data from hour to hour: Image of sample chart The data in this graph is stored in the format {x:timestamp, y:value}, and bars are all located at the correct positions, however some of the tooltips are wrong: Second sample chart In this example, my mouse is highlighted over the "1AM" bar for dataset "0", yet the timestamp says it is at 9:00 AM, and the 9:00 bar for dataset "1" is highlighted. Also, the data displayed in the tooltip (1.279) is actually correct for 1AM, not 9.

From what I can tell, this seems to happen because there is a different number of data points in each dataset, and the "index" mode for tooltips doesn't handle this correctly. The data for this chart is below:

{
  backgroundColor: "rgba(240, 80, 45, 0.63)",
  borderColor: "#f0502d",
  label: "1",
  data:[
  {
    "x": 1589497200000,
    "y": 0.014
  },
  {
    "x": 1589500800000,
    "y": 0.003
  },
  {
    "x": 1589504400000,
    "y": 0
  },
  {
    "x": 1589536800000,
    "y": 0
  },
  {
    "x": 1589540400000,
    "y": 0.023
  },
  {
    "x": 1589544000000,
    "y": 0.251
  },
  {
    "x": 1589547600000,
    "y": 0.599
  },
  {
    "x": 1589551200000,
    "y": 0.896
  },
  {
    "x": 1589554800000,
    "y": 1.582
  },
  {
    "x": 1589558400000,
    "y": 2.335
  },
  {
    "x": 1589562000000,
    "y": 1.302
  },
  {
    "x": 1589565600000,
    "y": 2.774
  },
  {
    "x": 1589569200000,
    "y": 2.432
  },
  {
    "x": 1589572800000,
    "y": 1.257
  },
  {
    "x": 1589576400000,
    "y": 0.056
  }
]},
{
[
  label:"0",
  backgroundColor: "rgba(217, 217, 216, 0.63)",
  borderColor: "#d9d9d8",
  data:{
    "x": 1589497200000,
    "y": 0.014
  },
  {
    "x": 1589500800000,
    "y": 0.003
  },
  {
    "x": 1589504400000,
    "y": 0
  },
  {
    "x": 1589536800000,
    "y": 0
  },
  {
    "x": 1589540400000,
    "y": 0.023
  },
  {
    "x": 1589544000000,
    "y": 0.251
  },
  {
    "x": 1589547600000,
    "y": 0.599
  },
  {
    "x": 1589551200000,
    "y": 0.896
  },
  {
    "x": 1589554800000,
    "y": 1.582
  },
  {
    "x": 1589558400000,
    "y": 2.335
  },
  {
    "x": 1589562000000,
    "y": 1.302
  },
  {
    "x": 1589565600000,
    "y": 2.774
  },
  {
    "x": 1589569200000,
    "y": 2.432
  },
  {
    "x": 1589572800000,
    "y": 1.257
  },
  {
    "x": 1589576400000,
    "y": 0.056
  }
]}

And the options for this chart: (note that CustomTooltips is just 

{
            tooltips: {
                enabled: true,
                intersect: true,
                mode: 'index',
                position: 'nearest',
            },
            maintainAspectRatio: false,
            legend: {
                display: true,
                position: 'bottom'
            },
            scales: {

                xAxes: [
                    {
                        type:"time",
                        distribution:"series",
                        offset:true,
                        time:{
                        },
                        scaleLabel: {
                            display: true
                        },
                        ticks: {
                            maxRotation: 0,
                            maxTicksLimit: 12,
                        }
                    }],
                yAxes: [
                    {
                        ticks: {
                            beginAtZero: true,
                            maxTicksLimit: 8,
                        }
                    }],
            },
            elements: {
                point: {
                    radius: 0,
                    hitRadius: 10,
                    hoverRadius: 4,
                    hoverBorderWidth: 5,
                },
            },
        }

So my question is: how can I get the tooltips displaying the correct times and correct values?

I could switch the tooltip mode to "x", but then the tooltip only displays for one bar at a time, rather than the bars for both datasets that happen at the same time, so I'd rather not do this.

Upvotes: 0

Views: 1479

Answers (1)

uminder
uminder

Reputation: 26150

The cause of your problem may be related to a buggy version of Chart.js. Therefore makek sure to use the latest stable version of the library (currently v2.9.3).

Your code looks fine to me. Nevertheless I made the following slight changes to it.

...removed the elements object from the chart options.

...defined xAxis.time as follows to make sure, the hours in the tick labels and in the tooltip are of the same format. 

xAxes: [{
  type: "time",
  ...
  time: { 
    unit: 'hour',
    tooltipFormat: 'hA' 
  },

Please have a look at your amended runnable code below.

const datasets = [{
    backgroundColor: "rgba(240, 80, 45, 0.63)",
    borderColor: "#f0502d",
    label: "1",
    data: [{
        "x": 1589497200000,
        "y": 0.014
      },
      {
        "x": 1589500800000,
        "y": 0.003
      },
      {
        "x": 1589504400000,
        "y": 0
      },
      {
        "x": 1589536800000,
        "y": 0
      },
      {
        "x": 1589540400000,
        "y": 0.023
      },
      {
        "x": 1589544000000,
        "y": 0.251
      },
      {
        "x": 1589547600000,
        "y": 0.599
      },
      {
        "x": 1589551200000,
        "y": 0.896
      },
      {
        "x": 1589554800000,
        "y": 1.582
      },
      {
        "x": 1589558400000,
        "y": 2.335
      },
      {
        "x": 1589562000000,
        "y": 1.302
      },
      {
        "x": 1589565600000,
        "y": 2.774
      },
      {
        "x": 1589569200000,
        "y": 2.432
      },
      {
        "x": 1589572800000,
        "y": 1.257
      },
      {
        "x": 1589576400000,
        "y": 0.056
      }
    ]
  },
  {
    label: "0",
    backgroundColor: "rgba(217, 217, 216, 0.63)",
    borderColor: "#d9d9d8",
    data: [{
        "x": 1589497200000,
        "y": 0.014
      },
      {
        "x": 1589500800000,
        "y": 0.003
      },
      {
        "x": 1589504400000,
        "y": 0
      },
      {
        "x": 1589536800000,
        "y": 0
      },
      {
        "x": 1589540400000,
        "y": 0.023
      },
      {
        "x": 1589544000000,
        "y": 0.251
      },
      {
        "x": 1589547600000,
        "y": 0.599
      },
      {
        "x": 1589551200000,
        "y": 0.896
      },
      {
        "x": 1589554800000,
        "y": 1.582
      },
      {
        "x": 1589558400000,
        "y": 2.335
      },
      {
        "x": 1589562000000,
        "y": 1.302
      },
      {
        "x": 1589565600000,
        "y": 2.774
      },
      {
        "x": 1589569200000,
        "y": 2.432
      },
      {
        "x": 1589572800000,
        "y": 1.257
      },
      {
        "x": 1589576400000,
        "y": 0.056
      }
    ]
  }
];

const options = {
  tooltips: {
    enabled: true,
    intersect: true,
    mode: 'index',
    position: 'nearest',
  },
  maintainAspectRatio: false,
  legend: {
    display: true,
    position: 'bottom'
  },
  scales: {
    xAxes: [{
      type: "time",
      distribution: "series",
      offset: true,
      time: { 
        unit: 'hour',
        tooltipFormat: 'hA' 
      },
      scaleLabel: {
        display: true
      },
      ticks: {
        maxRotation: 0,
        maxTicksLimit: 12,
      }
    }],
    yAxes: [{
      ticks: {
        beginAtZero: true,
        maxTicksLimit: 8,
      }
    }],
  }
};

new Chart("barChart", {
  type: 'bar',
  data: {
    datasets: datasets
  },
  options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="barChart" height="200"></canvas>

Upvotes: 0

Related Questions