Chart.js — Options

We can make creating charts on a web page easy with Chart.js.

In this article, we’ll look at how to create charts with Chart.js.

Printing Resizable Charts

We can add an event handler for the beforeprint event to trigger the resizing of the charts before we print them.

For example, we can write:

window.onbeforeprint = () => {
  for (const id in Chart.instances) {
    Chart.instances[id].resize();
  }
}

to add the beforeprint handler and resize all the chart instances that are found with Chart.instances .

Events

We can set which events a chart responds to.

For example, we can add the options.event property with an array of event name strings to set the events it responds to:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
      ],
      borderWidth: 1
    }]
  },
  options: {
    events: ['click'],
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

We have the ['click'] array so that it only respond to click events.

Interaction Modes

We can configure the interaction of tooltips.

For example, we can write:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
      ],
      borderWidth: 1
    }]
  },
  options: {
    tooltips: {
      mode: 'point'
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

to find all the items that intersect the point.

We can get the items that are nearest to the point with the 'nearest' value.

This means that the tooltip is only triggered when the mouse position intersects an item in the graph.

Scriptable Options

We can set scriptable options with a function.

For example, we can change the color option dynamically by writing:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{
      label: '# of Votes',
      data: [-1, 19, 3],
      backgroundColor(context) {
        var index = context.dataIndex;
        var value = context.dataset.data[index];
        return value < 0 ? 'red' :
          index % 2 ? 'blue' :
          'green';
      },
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

We changed the background colors of the bars with the backgroundColor options.

index has the index of the graph.

value has the value of the y-axis.

So if value , we show red.

Otherwise, we alternate between blue and green.

Conclusion

We can change various options with Chart.js.

Also, we can resize charts to fit when we print them.