search

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

What is the width and height in this example? #379

Closed rclai closed 5 years ago

rclai commented 5 years ago

Trying to get the crosshair working.

There is no width or height prop passed in to this example.

https://github.com/esnet/react-timeseries-charts/blob/645d00563a0f00cca970b5a0c6ee8f3aa988112b/src/website/packages/charts/examples/currency/Index.js#L67-L68

pjm17971 commented 5 years ago

That's an example of writing your own chart to fit in the general chart layout. Each chart has props injected into it from the surrounding ChartRow and ChartContainer, since those elements determine the size. The ChartContainer has a width, as do the axes, so the width of the chart is basically the width of the ChartContainer minus the axis widths and any padding. The height of the chart is determined by the ChartRow, on which you specify the height. Any chart in that ChartRow will have the same height. Both of these calculated dimensions are passed (along with the scales) into each chart as props, which it then renders using. (in this case the crosshairs don't need the scales).

rclai commented 5 years ago

Thanks, ah I see, I did not realize the width and height were being injected under the hood.