reactjs / react-chartjs

common react charting components using chart.js
MIT License
2.93k stars 301 forks source link

`lineTension` not work #146

Closed mantou132 closed 7 years ago

mantou132 commented 7 years ago

Set to 0 to not draw straightlines.

import React from 'react';
import {Line} from 'react-chartjs';

import styles from './statistics.scss';

export default class LineChart extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      show: false,
      width: 0,
      height: 0,
      data: {
        labels: props.labels || ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [
          {
            label: props.label || 'My First dataset',
            fill: false,
            lineTension: 0,
            backgroundColor: 'rgba(75,192,192,0.4)',
            borderColor: 'rgba(75,192,192,1)',
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: 'rgba(75,192,192,1)',
            pointBackgroundColor: '#fff',
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: 'rgba(75,192,192,1)',
            pointHoverBorderColor: 'rgba(220,220,220,1)',
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: props.data || [65, 59, 80, 81, 56, 55, 40],
            spanGaps: false
          }
        ]
      }
    };
  }
  componentDidMount () {
    const rect = this.refs.chart.getBoundingClientRect();
    const width = rect.width;
    const height = rect.height;
    setTimeout(() => {
      this.setState({
        ...this.state,
        show: true,
        width,
        height
      });
    }, 100);
  }
  render () {
    const {width, height, data, show} = this.state;
    return (
      <div ref="chart" className={styles.chartwrap}>
        <div className={styles.chartspace}/>
        {show && <Line className={styles.chart} data={data} width={width} height={height}/>}
      </div>
    );
  }
}
LineChart.propTypes = {
  i18n: React.PropTypes.object,
  label: React.PropTypes.string,
  labels: React.PropTypes.array,
  data: React.PropTypes.array
};
mantou132 commented 7 years ago

should look chart.js v1.1.1 documents