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

Randomize

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;
  7. const config = {
  8. type: 'line',
  9. data: data,
  10. options: {
  11. responsive: true,
  12. plugins: {
  13. title: {
  14. display: true,
  15. text: 'Grid Line Settings'
  16. }
  17. },
  18. scales: {
  19. x: {
  20. grid: {
  21. display: DISPLAY,
  22. drawBorder: BORDER,
  23. drawOnChartArea: CHART_AREA,
  24. drawTicks: TICKS,
  25. }
  26. },
  27. y: {
  28. grid: {
  29. drawBorder: false,
  30. color: function(context) {
  31. if (context.tick.value > 0) {
  32. return Utils.CHART_COLORS.green;
  33. } else if (context.tick.value < 0) {
  34. return Utils.CHART_COLORS.red;
  35. }
  36. return '#000000';
  37. },
  38. },
  39. }
  40. }
  41. },
  42. };
  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. ];

Docs