Chartjs-Chart.JS – multiple – box – annotations – displays only the last box

by

1👍

✅

2 things. First you tried defining the scales config in the v2 way, this doesnt work anymore. You shouldnt define your scale as time since you dont use time objects, to use the timeScale you need to provide moment/luxon or any other date lib objects and the corresponding date adapter so chart.js can automatically make ticks for the scale.

Also as defined in the chart.js annotation docs (https://www.chartjs.org/chartjs-plugin-annotation/guide/types/box.html#configuration) you need to provide a number for the xMin and xMax prop so you can give it the label, you give it the index of where it needs to draw it.

Live example:

var timeFormat = {
  'millisecond': 'HH:mm',
  'second': 'HH:mm',
  'minute': 'HH:mm',
  'hour': 'HH:mm',
  'day': 'HH:mm',
  'week': 'HH:mm',
  'month': 'HH:mm',
  'quarter': 'HH:mm',
  'year': 'HH:mm',
};


const options = {
  type: 'line',
  data: {
    labels: ['6:38', '6:38', '6:38', '6:38', '6:39', '6:39', '6:39', '6:39', '6:39', '6:39', '6:40', '6:40', '6:40', '6:40', '6:40', '6:40', '6:41', '6:41', '6:41', '6:41', '6:41', '6:41', '6:42', '6:42', '6:42', '6:42', '6:42', '6:42', '6:43', '6:43', '6:43', '6:43', '6:43', '6:43', '6:44', '6:44', '6:44', '6:44', '6:44', '6:44', '6:45', '6:45', '6:45', '6:45', '6:45', '6:45', '6:46', '6:46', '6:46', '6:46', '6:46', '6:46', '6:47', '6:47', '6:47', '6:47', '6:47', '6:47', '6:48', '6:48', '6:48', '6:48', '6:48', '6:48', '6:49', '6:49', '6:49', '6:49', '6:49', '6:49', '6:50', '6:50', '6:50', '6:50', '6:50', '6:50', '6:51', '6:51', '6:51', '6:51', '6:51', '6:51', '6:52', '6:52', '6:52', '6:52', '6:52', '6:52', '6:53', '6:53', '6:53', '6:53', '6:53', '6:53', '6:54', '6:54', '6:54', '6:54', '6:54', '10:54'],



    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 2, 19, 3, 5, 2, 2, 19, 3, 5, 2, 2, 19, 3, 5, 2, 3],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      // New way of defining scales
      x: {
        grid: {
          color: 'red'
        }
      },
      y: {}
    },
    plugins: {
      annotation: {
        annotations: {
          box1: {
            type: "box",
            drawTime: "beforeDatasetsDraw",
            xMin: '6:39', // doesnt work, needs point index
            xMax: '7:00', // doesnt work, needs point index
            yMin: 2,
            yMax: 10,
            backgroundColor: "red",


          },
          box2: {
            type: "box",
            drawTime: "beforeDatasetsDraw",
            xMin: 7,
            xMax: 10.14,
            yMin: 2,
            yMax: 10,
            backgroundColor: "blue",

          }
        }
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);

document.getElementById("tt").addEventListener("click", () => {
  chart.options.plugins.annotation.annotations.box1.yMax = 16;
  chart.update();
});

document.getElementById("rr").addEventListener("click", () => {
  chart.options.plugins.annotation.annotations.box1.yMax = 8;
  chart.update();
});
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <button id="tt">Update annotation to 16</button>
  <button id="rr">Update annotation to 8</button>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.0.2/chartjs-plugin-annotation.js"></script>
</body>

Basic fiddle with example of the time scale implementation with moment: https://jsfiddle.net/Leelenaleee/bza0v3rc/11/

Leave a comment