Migrate to react-charts?

[bmaupin]

Since react-vis is deprecated for a long time, react-charts looks very promising. It should also let us fix #23.

• Needed
  • Override curve with custom D3 sigmoid curve
    • y axes curve option
  • Don't show null values
    • return null in y axis getValue
  • Override axis labels
    • y axis options > formatters > scale
  • Override line colours
    • chart options > getSeriesStyle
    • or defaultColors?
  • Left/right axes
    • return a second axis in secondaryAxes with position: 'right'
  • Set number of ticks
    • y axis options > tickCount
  • Override datum style (see Override datum style when not hovered TanStack/react-charts#264)
  • Disable animations
    • return transition: 'none' in getSeriesStyle
  • Override line style on hover
    • getDatumStyle/getSeriesStyle (see https://github.com/tannerlinsley/react-charts/blob/beta/examples/simple/src/components/CustomStyles.tsx)
  • Override popover table
    • axis options > formatters > tooltip?
  • Don't show horizontal/vertical lines on popover
  • Fix hover on border values not always working
  • Fix console errors
  • Darken x/y axis labels
    • They're not as bad as react-vis, so we'll leave the defaults for now
  • Better use of vertical/horizontal height (UI improvements #11)
  • Optimize mobile view
• Optional
  • Invert axis
    • y axis options > invert: true
  • Fix for chart margins changing when browser window is resized

[bmaupin]

The branch for this work is https://github.com/bmaupin/langtrends/tree/migrate-to-react-charts

[bmaupin]

Alternatives:

• https://github.com/recharts/recharts
  • Seems to have same hover issue as react-charts
• https://github.com/plouc/nivo
  • Seems to have same hover issue as react-charts

I think at this point react-charts is probably the best option since we've almost worked out all the bugs.