marmelab / EventDrops

A time based / event series interactive visualization using d3.js
http://marmelab.com/EventDrops/
MIT License
1.24k stars 237 forks source link

Enhancement: Vertical grid lines (on tick) and custom tickPadding #261

Closed Busteren closed 5 years ago

Busteren commented 5 years ago

Implemented option to add vertical grid lines. This uses the tick and adds the inner size equal to the line height times number of drop lines. In order for the labels to stay the same without grid lines, the tickPadding is specified and can be changed to allow for more customisation.

Looks alright also a nice feature to have if there is a lot of data and you want to be able to see the difference between the data points a bit more easily.

Busteren commented 5 years ago

Did you mean a screenshot in the config docs?

with_gridlines with_gridlines_2

Here is the result, as you can see, if the gridline is set to true, one might be better of setting the style of the line separators to be hidden.

The vertical lines follows the tick, so when you zoom, the lines will always be correlated to a tick.

I also removed an unused d3 timeformat, as it is using the external D3 (removes quite a bit of code from final)

jpetitcolas commented 5 years ago

Can you lighten color of vertical ticks? It is too dark. Moreover, can we put them below the drops?

Busteren commented 5 years ago
vertical_gridlines_3

Put the vertical gridlines below (by changing the axis to be called before dropLine) and added CSS to match the droplines. What do you think? Will add the commit once we think it looks alright.

Will also add images to the config files, so people know what it looks like

fzaninotto commented 5 years ago

thanks!