Grid Configuration

This sample shows how to use scriptable grid options for an axis to control styling. In this case, the Y axis grid lines are colored based on their value. In addition, booleans are provided to toggle different parts of the X axis grid visibility.

Grid Configuration - 图1

config setup actions

  1. // Change these settings to change the display for different parts of the X axis
  2. // grid configuiration
  3. const DISPLAY = true;
  4. const BORDER = true;
  5. const CHART_AREA = true;
  6. const TICKS = true;
  8. const config = {
  9.   type: 'line',
  10.   data: data,
  11.   options: {
  12.     responsive: true,
  13.     plugins: {
  14.       title: {
  15.         display: true,
  16.         text: 'Grid Line Settings'
  17.       }
  18.     },
  19.     scales: {
  20.       x: {
  21.         grid: {
  22.           display: DISPLAY,
  23.           drawBorder: BORDER,
  24.           drawOnChartArea: CHART_AREA,
  25.           drawTicks: TICKS,
  26.         }
  27.       },
  28.       y: {
  29.         grid: {
  30.           drawBorder: false,
  31.           color: function(context) {
  32.             if (context.tick.value > 0) {
  33.               return Utils.CHART_COLORS.green;
  34.             } else if (context.tick.value < 0) {
  35.               return Utils.CHART_COLORS.red;
  36.             }
  38.             return '#000000';
  39.           },
  40.         },
  41.       }
  42.     }
  43.   },
  44. };
  1. const DATA_COUNT = 7;
  2. const data = {
  3.   labels: Utils.months({count: DATA_COUNT}),
  4.   datasets: [
  5.     {
  6.       label: 'Dataset 1',
  7.       data: [10, 30, 39, 20, 25, 34, -10],
  8.       fill: false,
  9.       borderColor: Utils.CHART_COLORS.red,
  10.       backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
  11.     },
  12.     {
  13.       label: 'Dataset 2',
  14.       data: [18, 33, 22, 19, 11, -39, 30],
  15.       fill: false,
  16.       borderColor: Utils.CHART_COLORS.blue,
  17.       backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
  18.     }
  19.   ]
  20. };
  1. const actions = [
  2.   {
  3.     name: 'Randomize',
  4.     handler(chart) {
  5.       chart.data.datasets.forEach(dataset => {
  6.         dataset.data = Utils.numbers({count: chart.data.labels.length, min: -100, max: 100});
  7.       });
  8.       chart.update();
  9.     }
  10.   },
  11. ];