Added gridlines between ticks #7742
Conversation
| @@ -24,6 +24,9 @@ The grid line configuration is nested under the scale configuration in the `grid | |||
| | `tickMarkLength` | `number` | | | `10` | Length in pixels that the grid lines will draw into the axis area. | |||
| | `offsetGridLines` | `boolean` | | | `false` | If true, grid lines will be shifted to be between labels. This is set to `true` for a bar chart by default. | |||
| | `z` | `number` | | | `0` | z-index of gridline layer. Values <= 0 are drawn under datasets, > 0 on top. | |||
| | `linesBetweenTicks` | `number` | | | `0` | Number of lines between the labeled gridlines | |||
| | `linesBetweenTicksWidth` | `number` | | | `0.5` | Stroke width of the `linesBetweenTicks` gridlines | |||
There was a problem hiding this comment.
Might be good to have a full set of config options for these (color, dash, etc). Alternatively, have these lines appear in the scriptable gridline callbacks.
| ty1 = ty2 = y1 = y2 = alignedLineValue; | ||
| let lineDistance = 0; | ||
| if (gridLines.linesBetweenTicks !== 0) { | ||
| lineDistance = (lineValue - previousLineValue) / (gridLines.linesBetweenTicks + 1); |
There was a problem hiding this comment.
What do you think about adding these into the ticks array when it is built? It would require ensuring the label does not show, but would mean that the extra config options wouldn't be needed. @kurkle thoughts?
There was a problem hiding this comment.
@etimberg Sure, but this would mean that these lines cannot be configured on their own. I think it would be useful to have config options for these lines (at least the width, but dash and color would also be useful to add as well).
There was a problem hiding this comment.
@etimberg do you think this feature could be useful for ChartJS? and what would you like to have changed compared to this pull request? More configurations (width, dash, and color?)? And do you want to access this feature in a different way, for example adding it directly in the ticks array or in a callback? Then I could look at it again and implement it that way.
There was a problem hiding this comment.
@JoostBaars sorry for the delay. I was hoping @kurkle could provide some input before I requested changes.
At minimum, I think the configuration should include the same options as grid lines (width, dash, colour). In terms of accessing these values through the tick array, I'm torn. On one hand, I think from a modelling perspective they are better put there. The time scale already has the concept of major/minor ticks and there is configuration overrides for the major ticks. https://www.chartjs.org/docs/master/axes/styling#major-tick-configuration
V2 used to have a minor tick override, but it was removed as it turned out to not be very useful. Perhaps this could be leveraged to format these intermediate grid lines?
There was a problem hiding this comment.
@etimberg Alright, I'll add the other options as the gridlines. I will look more into the location where to access these values (the minor tick override of V2 or the tick array).
There was a problem hiding this comment.
Sorry, I've been busy the last time... I have added the other settings but did not look for a better place yet to store these parameters.
|
Sorry for the late comment. Some generic thoughts:
And some specific thoughts:
Would this make any sense: gridLines: {
intermediate: {
count: 1,
borderColor: 'green' //same names of options with `gridLines` scope, and fallback to there
},
borderColor: 'red',
borderDash: [1, 2]
} |
|
Does not look like this is going anywhere. |
Adds the possibility to draw gridlines without a label (between labeled gridlines).
A badly working hack for this is posted on stackoverflow: https://stackoverflow.com/questions/42487438/different-gridline-steps-on-chart-js-line-chart. But the scaling does not work properly anymore with this hack.
Therefore, this PR adds the possibility to configure these gridlines from the gridline options. The number of gridlines can be configured as well as the width of the gridlines.
A working fiddle is shown here: https://jsfiddle.net/L4b7sq9u/4/.