Chartjs-Is there a way to draw floating rectangle using chart.js

0👍

There is a plugin for chart.js called chartjs-plugin-annotation.js (It is also available on bower https://libraries.io/bower/chartjs-plugin-annotation)

Once you include that js file you can do something like:

var myChart = new Chart(document.getElementById("myChart"), {
     type: 'bubble',
          data: {
              datasets:[
                 ...
              ]
           },
          options:{
             scales: {
                yAxes: [{
                   ...
                }],
                xAxes: [{
                   ...
                }],
             },

        annotation: {
          annotations: [{
            type: 'box',

            // ID of the X scale to bind onto
            xScaleID: 'x-axis-0',

            // ID of the Y scale to bind onto
            yScaleID: 'y-axis-0',

            // Left edge of the box. in units along the x axis
            xMin: 25,

            // Right edge of the box
            xMax: 40,

            // Top edge of the box in units along the y axis
            yMax: 20,

            // Bottom edge of the box
            yMin:  15,

            // Stroke color
            borderColor: 'red'

            // Stroke width
            borderWidth: 4,
         }]
      }
   }

You will want to play around with the settings listed there but that will draw a rectangle for you.

Leave a comment