[Chartjs]-Change chart.js options based on window width

by

1👍

✅

Let us introduce a new option hideXAxesWhenChartIsXXS. This option will enable hiding of all x-axes when the chart’s width is less than 480 pixels. The hideXAxesWhenChartIsXXS option will be read by the toggleXAxesDisplayPlugin plugin. If the option is defined and true, then the plugin will decide whether the x-axes will be displayed or not based on the chart’s new width, every time the chart is resized (that covers first-time drawing of the chart as well).

Talk is cheap, so here is the code. The code is also available below.

// Hides x-axes, when the chart is XXS.
var toggleXAxesDisplayPlugin = {
  // Runs on resize.
  resize: function(chartInstance, newChartSize) {
    // If the option is defined and `true`.
    if (chartInstance.config.options.hideXAxesWhenChartIsXXS) {
      if (newChartSize.width < 480) {
        // Iterate all x-axes.
        chartInstance.config.options.scales.xAxes.forEach(function(axis) {
          // Hide axis.
          axis.display = false;
        });
      } else {
        // Iterate all x-axes.
        chartInstance.config.options.scales.xAxes.forEach(function(axis) {
          // Show axis.
          axis.display = true;
        });
      }
    }
  }
};

Chart.pluginService.register(toggleXAxesDisplayPlugin);

var allTimeAll = $("#my-chart");
var allTimeAllChart = new Chart(allTimeAll, {
  type: 'bar',
  data: {
    labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
    datasets: [{
      label: 'Confirmed',
      data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
      backgroundColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)',
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)',
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1,
    }]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        gridLines: {
          display: true
        },
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        display: true,
        gridLines: {
          display: false
        },
      }]
    },
    // If this option is defined and `true`, then the plugin's functionality will be activated.
    hideXAxesWhenChartIsXXS: true
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="my-chart" width="400" height="400"></canvas>

Leave a comment