CODEWITHSUNDEEP
javascriptchartsreactjs
Enrikisimo Lopez Ramos
Enrikisimo Lopez Ramos

Reputation: 393

How to create a LineChart with dynamic width with react-chartjs?

I am trying create a LineChart with dynamic width but only get the first value. 

<LineChart data = {this.state.dataLine} options = {{}} width={this.state.widthChart} height = "250" />

Upvotes: 2

Views: 1293

Answers (1)

mcnutt
mcnutt

Reputation: 681

I'm not sure how one would achieve this in react-chartjs, but it's pretty easy in react-vis, which is similar.

import React from 'react';

import {
  XAxis,
  YAxis,
  FlexibleWidthXYPlot,
  HorizontalGridLines,
  LineSeries
} from 'react-vis';

export default class Example extends React.Component {
  render() {
    return (
      <FlexibleWidthXYPlot
        height={300}>
        <HorizontalGridLines />
        <YAxis />
        <XAxis />
        <LineSeries data={myData}/>
      </FlexibleWidthXYPlot>
    );
  }
}

For more check here http://uber.github.io/react-vis/#/documentation/api-reference/flexible-plots

Upvotes: 1

Related Questions