search

esnet / react-timeseries-charts

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

Can the tracker line be styled #321

Closed daviddionys closed 6 years ago

daviddionys commented 6 years ago

Dear, I want to insert a vertical line in the chart at the time that is selected, as in 

<ChartContainer
                  timeRange={series.range()}
                  showGrid={false}
                  showGridPosition="under"
                  timeAxisTickCount={5}
                  trackerPosition={this.state.currentDateTime}
>

This works great, the line has the exact position. However, there seems to be no way to style this line. In EventMarker, stemStyle can be passed, e.g. { {stroke: "rgb(255,153,153)", strokeWidth:"5px",cursor: "crosshair", pointerEvents: "none" }} but then I need to pass an infobox (which I do not want to do), and I had problems with the offsetY for the marker there as well.

Can a custom style be applied in any way to the tracker generated directly from the ChartContainer?

sartaj10 commented 6 years ago

@daviddionys

Hi, thanks for the question.

Yes, you can apply a trackerStyle and pass it to the ChartContainer as shown below: https://github.com/esnet/react-timeseries-charts/blob/master/src/components/ChartContainer.js#L629

This is also shown in the traffic example https://github.com/esnet/react-timeseries-charts/blob/master/src/website/packages/charts/examples/traffic/Index.js#L56

Hopefully this solves your question!

daviddionys commented 6 years ago

Dear Sartaj, this worked indeed, thank you so much, you really made my day!

I should probaby check the components directly in github, because I was checking the API at https://software.es.net/react-timeseries-charts/#/api/charts/ChartContainer

sartaj10 commented 6 years ago

Hmm, I guess we forgot to update the docs. Thanks, but that website is usually up to date with all the props.