Line chart component that is full responsive and has mouse tooltip feature using React, typescript.

Community Help
1

I want to create a react component like following chart.

Is there a template like this?

2

I have created a similar type of chart using vanilla JavaScript, incorporating D3.js and Konva. This might assist you in creating the chart you need in React.

3

Thank you. @imakashram

4

Responsive charts can be pretty tricky, as thereā€™s a lot of moving parts. They donā€™t really follow the same rules as either images or text in terms of filling their container.

I once started on a React/Typescript data-vis library that aimed to make responsiveness a first-class feature, but couldnā€™t really generate much interest. https://hypocube.space

Drop me a DM if you want to chat further.

5

Thank you @CAYdenberg

6

I wrote a bit of a case study in response to your question. Although itā€™s a bit late (these things take time), you may still find it useful: Responsive charts: a case study | Living Pixel