2

I am using React 15.7 & react-chartjs-2 and i want to display a line graph the has many data points whose numbers varies depending on the time of day. If i simply input these data points on the chart it becomes practically unreadable because the width of the chart is too small for all the data points.

By default the line chart covers all the available page width

Chart

So i tried wrapping the graph in a DIV tag (lets call it "graph wrapper") and dynamically adjusting the width based on how many data points there are each time. Then i wrapped the "graph wrapper" inside a second DIV whose width is the page width and the overflow was set to auto.

 <div className={'graph-container'}>
          <div className={'graph-wrapper'} style={{width, height}}>
                   <Line  height={height} data={{datasets,labels}} options={options}/>
          </div>
 </div>

The above solution works but there is one issue. The line breaks after a certain amount of width is reached and only the dots from data points are visible.

enter image description here

Is there any solution to this? Through plug in or through custom code?

geoath
  • 51
  • 1
  • 3
  • 1
    Not for sure but does this make an approach? https://stackoverflow.com/questions/35854244/how-can-i-create-a-horizontal-scrolling-chart-js-line-chart-with-a-locked-y-axis – keikai Apr 07 '20 at 16:37
  • Thank you for your answer. The problem was that the chart while it functioned as expected, it didn't render correctly. So i end up switching to https://apexcharts.com/ and now it works like a charm. – geoath Apr 10 '20 at 15:52

0 Answers0