esnet / react-timeseries-charts

Declarative and modular timeseries charting components for React
http://software.es.net/react-timeseries-charts
Other
861 stars 284 forks source link

Add styling option #377

Closed sartaj10 closed 5 years ago

sartaj10 commented 5 years ago

@chrisimmel

This work replicates the PR and rebases it with the latest code on master.

==== Original PR Description

This adds two new props for finer control of vertical spacing:

EventMarker.infoOffsetY controls the vertical offset in pixels of the EventMarker info box from the top of the chart. The default is 20px, the value that was previously hardcoded. The prop was also added to components that include EventMarker (BarChart, BoxChart, ScatterChart).

ChartRow.axisMargin controls the vertical margin between the top and bottom of the chart height and the top and bottom of the range of the chart. The default is 5px, the value that was previously hardcoded.

Sample usages were added to the existing stockchart and wind examples.

The motivation for these changes was a LineChart we have at Alluvium that is very squat. The hardcoded values for these parameters took too much vertical space in our use case. In particular, the default offset of the EventMarker info box placed it below the bottom edge of the chart.

chrisimmel commented 5 years ago

@sartaj10, thanks for taking this on! I've changed jobs and no longer have access to the original repo where I did the work.