bizcharts example: Line Chart

Chart UI

Codes

ChartComponent.js

import React, { Component } from 'react';
import {Chart, Axis, Tooltip, Geom, Coord, Label} from 'bizcharts';
import DataSet from '@antv/data-set';
const { DataView } = DataSet;

export class LineChart extends Component {
  render() {
    const { data, width, height } = this.props;
    if (!data || data.length <= 0)
      return null;
    const ytitle = {
      autoRotate: true,
      offset: -10,
      textStyle: {
        fontSize: '22',
        textAlign: 'left',
        fill: 'rgb(75,83,87)',
        rotate: 0
      },
      position: 'end',
    };
    const xtitle = {
      autoRotate: true,
      offset: -20,
      textStyle: {
        fontSize: '22',
        textAlign: 'center',
        fill: 'rgb(75,83,87)',
        rotate: 0
      },
      position: 'end',
    };
    const line = {
      stroke: 'rgb(197,197,200)',
      lineWidth: 2
    };
    const axis = [];
    let i = 0;
    for (let key in data[0]) {
      axis[i++] = key;
    }
    let cols = {};
    cols[axis[1]] = { min: 0};
    cols[axis[0]] = { range: [ 0, 1 ] };
    const position = axis[0] + '*' + axis[1];
    return (
      <div style={{width:width,height:height}}>
      <Chart width={width} height={height} data={data} scale={cols} padding='auto'>
        <Axis name={axis[0]} title={xtitle} tickLine={null} line={line} label={null}/>
        <Axis name={axis[1]} title={ytitle} tickLine={null} line={line} label={null}/>
        <Tooltip/>
        <Geom type="line" position={position} size={2} color='rgb(82,63,91)'/>
        <Geom type='point' position={position} size={4} shape={'circle'}
          color='rgb(236,142,91)' style={{ stroke: 'rgb(236,142,91)', lineWidth: 2}}>
        </Geom>
      </Chart>
      </div>
   )
  }
};

App.js

import React, { Component } from 'react';
import {LineChart} from './ChartComponent';
import './App.css';

class App extends Component {
  render() {
    const data = [];
    let i = 0;
    for (i = 0; i < 10; i++) {
      let time = 1000*Math.random();
      let score = 10*Math.random();
      data.push({'Timeline':time, 'Score':score});
    }
    return (
      <div className="App">
        <LineChart data={data} width={400} height={400}>
        </LineChart>
      </div>
    );
  }
}

export default App;

Dependences

yarn add bizcharts yarn add @antv/data-set

Refers

https://alibaba.github.io/BizCharts/demo-detail.html?code=demo/g2/clock
https://github.com/alibaba/BizCharts/tree/master/doc/tutorial

❤️ Support This Blog

---

If this post helped you, you can support my writing with a small donation. Thank you for reading.

---

Coffee ☕ Thanks 🙏 Extra Support ❤️