How does draw order work with the plugin?

[smcallis]

I have a chart and I'm using the fill property to emulate a kind of histogram-over-time sort of plot. To do this I have to fill between pairs of series, and to get that right I need to specify the order for each one. This works well enough:

But, the problem I'm having is that the zoom box draws underneath the series and I can't seem to find a way to fix it:

This is how I'm configuring it:

       function datasets(data) {
           var datasets = []
           const nseries = 10;
           for (var ii=0; ii < nseries; ++ii) {
               datasets.push({
                   label: "P" + (100-10*ii).toString(),
                   data: data.map(row => row[ii+1]),
                   backgroundColor: color((ii+1)/10.0),
                   borderColor:     color((ii+1)/10.0),
                   pointRadius: 0,
                   fill: nseries + ii,
                   order: nseries-ii
               })
           }

           for (var ii=0; ii < nseries; ++ii) {
               datasets.push({
                   label: "hide",
                   data: data.map(row => row[21-ii]),
                   backgroundColor: color((ii+1)/10.0),
                   borderColor:     color((ii+1)/10.0),
                   pointRadius: 0,
               })
           }

           datasets.push({
               label: "Median",
               data: data.map(row => row[nseries+1]),
               backgroundColor: color(0),
               borderColor:     color(0),
               pointRadius: 0,
               borderWidth: 1,
           })

           return datasets
       }

       const chart = new Chart(canvas, {
           type : 'line',
           data: {
               labels: mydata.map(row => row[0]/1000.),
               datasets: datasets(mydata)
           },

           options: {
               // Much faster without animations.
               animation : false,

               plugins: {
                   legend: {
                       // Filter out any items that are labelled "hide"
                       labels: {
                           filter: function(item, chart) {
                               return item.text != 'hide'
                           }
                       },

                       position: 'right',
                   },

                   zoom: {
                       pan: {
                           enabled: true,
                           modifierKey: 'ctrl'
                       },

                       zoom: {
                           drag: {
                               enabled: true,
                               backgroundColor: "rgba(16, 16, 16, 0.5)",
                               borderColor: "#CCCCCC",
                               borderWidth: 1,
                           },
                           mode: 'xy',
                       }
                   }
               },
           }
       });

       canvas.addEventListener('contextmenu', function(e) {
           e.preventDefault();
           e.stopPropagation();
           chart.resetZoom();
           return false;
       }, false);

Is it possible to get the plugin to draw on top always (even if it involves some monkey patching...)

[kurkle]

See https://www.chartjs.org/chartjs-plugin-zoom/latest/guide/options.html#draw-time

[smcallis]

Perfect! Thank you so much. I changed my zoom config to:

             zoom: {
               pan: {
                 enabled: true,
                 modifierKey: 'ctrl'
               },

               zoom: {
                 drag: {
                   enabled: true,
                   backgroundColor: "rgba(16, 16, 16, 0.5)",
                   borderWidth: 0,
                   drawTime: 'afterDatasetsDraw',  // <--- change
                 },
                 mode: 'xy',
               }
             }

And now it draws on top of the plot like I want: