Search code examples
javascriptchart.jsdata-visualizationaxis

Chart.js Faceting

Are there any plugins or config options inside chart.js to create faceted charts?

I have a requirement to create faceted charts using chart.js. A faced chart shares the X and/or Y axis across multiple charts. (see attached image for an example) and is a very common solution to many design visualization problems, but is absent from chart.js

Update Chart.js V3 added Stacked Axis which could potentially be used for creating faceted charts in chart.js

example of faceted charts enter image description here

Solution

  • 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/[email protected]/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>