JoeCode

Fun with Quickchart

Complex Quickchart example with annotations

{
  type: 'line',
  data: {
    labels: [1,2,3,4,5],
    datasets: [{
      label: 'Rainfall',
      data: [ 200, 90, 120, 400, 500 ],
      fill: false,
      borderColor: 'green',
      backgroundColor: 'green',
    }]
  },
  options: {
    annotation: {
      annotations: [{
        type: 'line',
        mode: 'vertical',
        scaleID: 'x-axis-0',
        value: 2,
        borderColor: 'red',
        borderWidth: 4,
        label: {
          enabled: true,
          content: 'Something changed'
        }
      }, {
        type: 'box',
        xScaleID: 'x-axis-0',
        yScaleID: 'y-axis-0',
        yMin: 30,
        yMax: 50,
        backgroundColor: 'blue',
        borderColor: 'green',
      }, {
        type: 'box',
        xScaleID: 'x-axis-0',
        yScaleID: 'y-axis-0',
        yMin: 300,
        yMax: 500,
        xMin: 1,
        xMax: 2,
        backgroundColor: 'rgba(255, 0, 0, 0.3)',
        borderColor: 'magenta',
      }, {
        type: 'box',
        xScaleID: 'x-axis-0',
        yScaleID: 'y-axis-0',
        yMin: 251,
        yMax: 500,
        xMin: 2,
        xMax: 5,
        backgroundColor: 'rgba(255, 0, 0, 0.3)',
        borderColor: 'magenta',
      }]
    },
    plugins: {
      datalabels: {
        display: true,
        align: 'bottom',
        backgroundColor: '#ccc',
        borderRadius: 3
      },
    }
  }
}