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

Question

How to draw 2 datasets on the same Chart.js plot, but with different sizes?

one line is for daily points
the second line has points every 6 hours, i.e. 4 x more points

This doesn't work:

const ctx = document.getElementById('myChart').getContext('2d');
const data = {
  labels: ["mon", "tue", "wed", "thu"],
  datasets: [{
    label: 'daily',
    data: [65, 59, 80, 81],
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
    tension: 0.1
  }, {
    label: 'every 6 hours',
    data: [60, 61, 62, 61, 58, 57, 66, 44, 81, 87, 99, 13, 81, 80, 79, 78],
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
    tension: 0.1
  }]
};
const myChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

In this codepen I randomly found it nearly works but I don't think it's the standard way,because when you hover one red bar, it shows the tooltip as expected, but also shows the tooltip for a distant unrelated point, which is not good.

Note: I have already read ChartJS - Line Chart with different size datasets but the result is not good (see the answer's screenshot's x-axis which is unreadable).

[This](https://stackoverflow.com/questions/50005275/chartjs-line-chart-with-different-size-datasets) might help you. — Geshode, Nov 09 '22 at 09:25
Thanks @Geshode. I have already read https://stackoverflow.com/questions/50005275/chartjs-line-chart-with-different-size-datasets but the result is not good (see the answer's screenshot's x-axis which is unreadable), so this is probably not the recommended way. — Basj, Nov 09 '22 at 09:44
To avoid to have the hovering on the unrelated points, you could try to set the "hover" options, like " hover: { mode: 'nearest' }," in the chart options. It should work. — user2057925, Nov 09 '22 at 10:33
An answer with this would be interesting for future reference @user2057925, I'll accept it if you post it. — Basj, Nov 09 '22 at 10:42

score 1 · Accepted Answer · edited Nov 09 '22 at 16:10

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>

Thanks! For future reference, can you include a runnable snippet showing multiple datasets of different sizes? — Basj, Nov 09 '22 at 13:45
Thanks @user2057925, I updated with 2 line plots as expected. — Basj, Nov 09 '22 at 16:11

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

1 Answers1