Chartjs-ChartJS Tooltips with time axis and multiple datasets

by

0👍

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>

Leave a comment