Export the useChartContext hook

[RichardNolan]

I need to add a line at the 0 index of the secondaryAxis. I can use the renderSVG option to draw the line, but have no context for the chart to determine the position of the line. Locally, to test, I have exposed the useChartContext hook and now any component rendered using renderSVG has access to the entire context (though its not typed). With that I could use the secondaryAxes.scale(0) to get the position and get the height and the gridDimensions for offsets.

[pedrogscruz]

You can create a component and import the useChartContext hook.

import { ChartContextValue } from 'react-charts'
import useChartContext from 'react-charts/es/utils/chartContext'

type TDatum = { primary: Date, secondary: number }

const ChartContext = () => {
  const context = useChartContext() as ChartContextValue<TDatum>
  useEffect(() = > {
    console.log(context.secondaryAxes)
  }, [])
  return null
}

then you can render it inside the component using the renderSVG method.

  ...
  <Chart<TDatum>
    renderSVG: () => (
     <defs>
       <linearGradient id='primaryGradient' x2='0%' y2='100%'>
         <stop offset='0%' stopColor='#21A646' />
         <stop offset='100%' stopColor='rgba(33,166,70, 0)' />
       </linearGradient>
       <linearGradient id='executedTradesGradient' x2='100%' y2='100%'>
         <stop offset='0%' stopColor='#4C7EC8' />
         <stop offset='50%' stopColor='rgba(76,126,200, 0.4)' />
         <stop offset='100%' stopColor='#4C7EC8' />
       </linearGradient>
       <ChartContext />
     </defs>
   ),
 />