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

Question

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" />

Have you tried setting an inline style? facebook.github.io/react/tips/inline-styles.html — Colin Whitmarsh
– Colin Whitmarsh, Commented May 12, 2016 at 17:33
width is a prop of the component LineChart, the problem is the re-render when change state.... the newest LineChart have a prop redraw that trigger method destroy and re-render the chart... — Enrikisimo Lopez Ramos
– Enrikisimo Lopez Ramos, Commented May 13, 2016 at 12:27

mcnutt · Accepted Answer · 2017-08-17 23:02:18Z

1

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

answered Aug 17, 2017 at 23:02

mcnutt

7018 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related