Chartjs-Overlap chart datasets with different view types in Chart.js

by

0👍

As one of possible solutions of this task was to use different types of datasets and additional options:

 const data = {
    type: 'bar',
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      datasets: [
        {
          type: 'line',
          label: 'Average Issues',
          backgroundColor: 'black',
          borderColor: 'black',
          data: [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4],
          fill: false,
          pointRadius: 28,
          pointHoverRadius: 39,
          showLine: false
        },
        {
          label: 'Issues',
          backgroundColor: 'rgba(200, 0, 200, 1)',
          borderColor: 'rgba(255, 159, 64, 1)',
          borderWidth: 78,
          data: [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8]
        }
      ]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      },
      responsive: true,
      legend: {
        display: false
      },
      elements: {
        point: {
          pointStyle: 'line'
        }
      }
    }
  };

  const chart = new Chart(canvasElement, data);

0👍

As the documentation says…

When creating a mixed chart, we specify the chart type on each dataset.

In other words: You can specify the chart type at the config level then you can change it at the dataset level.

Leave a comment