[Chartjs]-How to hide Chart.js data labels for small screens

by

0👍

✅

As usual, as soon as I post a question I come up with an answer. One solution using inline plugin definitions is given at the following CodePen. If you put a browser into developer mode and shrink the window to less than 540 px, the data labels will vanish.

The code is shown below:

"use strict";
/* global Chart */
/* global wNumb */
/* global ChartDataLabels */
/*
 * Unregister chartjs-plugins-datalabels - not really necessary for this use case
 */
Chart.plugins.unregister(ChartDataLabels);

var moneyFormat = wNumb({
  decimals: 0,
  thousand: ",",
  prefix: "$",
  negativeBefore: "-"
});

var percentFormat = wNumb({
  decimals: 0,
  suffix: "%",
  negativeBefore: "-"
});

var doughnutdata = {
  labels: [
    "Housing",
    "Food",
    "Transportation",
    "Clothing",
    "Healthcare",
    "Childcare",
    "Misc"
  ],
  datasets: [
    {
      backgroundColor: [
        "#9B2A00",
        "#5B5C90",
        "#6B8294",
        "#1A6300",
        "#BE0000",
        "#B8A853",
        "#64A856"
      ],
      borderColor: [
        "#FFFFFF",
        "#FFFFFF",
        "#FFFFFF",
        "#FFFFFF",
        "#FFFFFF",
        "#FFFFFF",
        "#FFFFFF"
      ],
      data: [88480, 57680, 40050, 18430, 23860, 25840, 17490]
    }
  ]
};

var chartOptions = {
  responsive: true,
  maintainAspectRatio: true,
  legend: {
    labels: {
      boxWidth: 20
    }
  },
  tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        var index = tooltipItem.index;
        return (
          data.labels[index] +
          ": " +
          moneyFormat.to(data.datasets[0].data[index]) +
          ""
        );
      }
    }
  },
  plugins: {
    datalabels: {
      anchor: "end",
      backgroundColor: function(context) {
        return context.dataset.backgroundColor;
      },
      borderColor: "white",
      borderRadius: 25,
      borderWidth: 1,
      color: "white",
      font: {
        size: 10
      },
      formatter: function(value, pieID) {
        var sum = 0;
        var dataArr = pieID.chart.data.datasets[0].data;
        dataArr.map(function(data) {
          sum += data;
        });
        var percentage = percentFormat.to(value * 100 / sum);
        return percentage;
      }
    }
  }
};

var doughnutID = document.getElementById("doughnutchart").getContext("2d");

var pieChart = new Chart(doughnutID, {
  plugins: [
    ChartDataLabels,
    {
      beforeLayout: function(chart) {
        var showLabels = (chart.width) > 500 ? true : false;
        chart.options.plugins.datalabels.display = showLabels;
      }
    },
    {
      onresize: function(chart) {
        var showLabels = (chart.width) > 500 ? true : false;
        chart.options.plugins.datalabels.display = showLabels;
      }
    }
  ],
  type: "doughnut",
  data: doughnutdata,
  options: chartOptions
});

I hope that this is useful.

6👍

Responsiveness can be implemented using scriptable options and in your case, you would use a function for the display option that returns false if the chart is smaller than a specific size. (Example):

options: {
  plugins: {
    datalabels: {
      display: function(context) {
        return context.chart.width > 500;
      }
    }
  }
}

Leave a comment