Multiple datasets on the same plot with different sizes with Chart.js

by

1👍

✅

To avoid to have the hovering on the unrelated points, you could try to set the hover options, like the following:

  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chart.js - Combo Chart With Multiple Scales (X Axis)'
    },
    hover: {  // <-- to add
      mode: 'nearest'
    },
    tooltips: {
      mode: 'nearest',
      intersect: true
    },
    ...
  }

var chartColors = {
  red: 'rgb(255, 99, 132)',
  orange: 'rgb(255, 159, 64)',
  yellow: 'rgb(255, 205, 86)',
  green: 'rgb(75, 192, 192)',
  blue: 'rgb(54, 162, 235)',
  purple: 'rgb(153, 102, 255)',
  grey: 'rgb(231,233,237)'
};

// returns a random integer between 0 and 10 inclusive
var getRandomValue = function() {
  min = Math.ceil(0);
  max = Math.floor(50);
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

// generates a value for each hour in a week
var generateData = function(n) {
  var data = [];
  for (var i = 0; i < n; i++) {
    data.push({
      x: i,
      y: getRandomValue()
    });
  }
  return data;
};

var hourlyData = generateData(168);
var dailyData = generateData(7);

var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    datasets: [{
      type: 'line',
      label: 'Daily',
      borderColor: chartColors.red,      
      data: dailyData,
      borderWidth: 2,
      fill: false
    }, {
      type: 'line',
      label: 'Hourly',
      borderColor: chartColors.green,
      backgroundColor: chartColors.green,
      borderWidth: 1,
      fill: false,
      pointRadius: 0,
      xAxisID: 'x-axis-2',
      data: hourlyData
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chart.js - Combo Chart With Multiple Scales (X Axis)'
    },
    hover: {
      mode: 'nearest'
    },
    tooltips: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      xAxes: [{}, {
        id: 'x-axis-2',
        type: 'linear',
        position: 'bottom',
        display: false,
      }],
      yAxes: [{
        ticks: {
          min: 0,
          max: 50
        }
      }]
    }
  }
});
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"/>
    </div>
  </body>
</html>

Leave a comment