Chartjs-Chart.js Faceting

by

2👍

✅

If I have understood well your use case, you need a matrix of chart instances with the "same" axes.
In the below snippet, I used min, max and ticks.count (I think they should be enough) to be sure that the axes have the same dimensions.

const getCanvas = function(id) {
  return document.getElementById(id).getContext("2d");
};
const createConfig = function(title, data, x, y) {
  return {
    type: 'line',
    data: {
        labels: ['A', 'B', 'C', 'D', 'E'],
        datasets: [
            {
                data,
                borderColor: 'green',
                borderWidth: 2,
            }]
    },
    options: {
      scales: {
        x: {
          ticks: {
            display: x
          }
        },
        y: {
          min: 0,
          max: 100,
          ticks: {
            display: y,
            count: 5
          }
        }
      },
        plugins: {
          legend: false,
          tooltip: false,
          title: {
            display: true,
            text: title
          }
        }
    }
  };
}
new Chart(getCanvas('myChart1'), createConfig('Amazon', [10, 20, 30, 5, 55], false, true));
new Chart(getCanvas('myChart2'), createConfig('Google', [10, 20, 30, 5, 55], false, false));
new Chart(getCanvas('myChart3'), createConfig('IBM', [10, 20, 30, 5, 55], true, true));
new Chart(getCanvas('myChart4'), createConfig('Microsoft', [10, 20, 30, 5, 55], true, false));
.myChartDiv {
  max-width: 300px;
  max-height: 200px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<html>
  <body>
    <table>
      <tr>
        <td>
    <div class="myChartDiv">
      <canvas id="myChart1" width="300" height="200"/>
    </div>
        </td>
        <td>
    <div class="myChartDiv">
      <canvas id="myChart2" width="300" height="200"/>
    </div>
        </td>
      </tr>
      <tr>
        <td>
    <div class="myChartDiv">
      <canvas id="myChart3" width="300" height="200"/>
    </div>
        </td>
        <td>
    <div class="myChartDiv">
      <canvas id="myChart4" width="300" height="200"/>
    </div>
        </td>
      </tr>
    </table>  
  </body>
</html>

Leave a comment