chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag
https://www.chartjs.org/
MIT License
63.91k stars 11.88k forks source link

gridlines z(-order/index) callback function for (major/minor) layout #7093

Open Giseldah opened 4 years ago

Giseldah commented 4 years ago

Feature Proposal

With v3.0, we have now a number of styling options for major/minor gridlines by callback function like: gridLines: { color: function(context) { return context.tick.major ? (context.tick.value ? 'grey' : 'black') : 'lightgrey'; }, However, these individual styling options can create a problem with z-index in the sense for instance that major gridlines should be drawn on top of minor gridlines.

It would be nice if 'z' worked on individual gridlines and had a callback function option: z: function(context) { return context.tick.major ? (context.tick.value ? -200 : -100) : -300; },

Feature Use Case

Here is a visual example of a z-index problem with major/minor gridline raster: https://i.imgur.com/onn6lSe.png

Possible Implementation

mgalindo commented 2 months ago