React-chartjsx Simple Yet Flexible React Chart Components for Designers & Developers

People normally don’t want to go through a large amount of data presented to them in form of text or tables. Mostly that’s because it is boring, but more importantly, it’s a little harder to process raw numbers.

Here is a table of the ten most populous countries in the world:

react-chartjsx

With only five countries in this table, there is still a very good chance that you and other will skip over the table entirely. Normally, people only look at one or two countries that interest them. If the same data had been presented in the form of a bar chart, it would have taken very little time for someone to get a rough idea of the population in these countries.

Moreover, it will be a lot easier to figure out trends or facts, for example, Asia is twice as populated as Africa, and Asia has about ten times more people than Latin America by looking at the length of bars in the chart.

Bar chart

react-chartjsx

react-chartjsx

The official React chart.js components. A simple yet flexible react chart components for designers & developers that you can use to create different kinds of charts is react-chartjsx. In this series, you will be learning about all the important aspects of this react chart components. It can be used to create fancy, responsive charts on HTML5 Canvas.

react-chartjsx allows you to mix different chart types and plot data on date time, logarithmic, or custom scales with ease. The library also sports out-of-the-box animations that can be applied when changing data or updating colors.

Let’s get started with the installation, and then we’ll move on to configuration options and other aspects.

Installation

1

npm install react-chartjsx chart.js --save

Usage

1
2
3
4
5
6
7
8
9
10
11

import { Bar, Line } from 'react-chartjsx'

<Bar data={this.state.barChartData}
     options={chartOptions}
     width={800}
     height={400} />

<Line data={this.state.lineChartData} 
      options={chartOptions} 
      width={400} 
      height={400} />

Properties
- data: PropTypes.object.isRequired
- width: PropTypes.number
- height: PropTypes.number
- options: PropTypes.object
- redraw: PropTypes.bool
- getDatasetAtEvent: PropTypes.func
- getElementAtEvent: PropTypes.func
- getElementsAtEvent: PropTypes.func
- getChart: PropTypes.func
- getCanvas: PropTypes.func

Redraw
If you want the chart destroyed and redrawn on every change, pass in redraw as true. 

1
2
3
4
5
6
7

import { Bar } from 'react-chartjsx'

<Bar data={this.state.barChartData}
     options={chartOptions}
     width={800}
     height={400}
     redraw={true} />

Custom size
To custom size you need to set responsive to false. 

1
2
3
4
5
6
7
8

const chartOptions = {
  responsive: false
}

<Bar data={this.state.chartDataBar}
     options={chartOptions}
     width={800}
     height={400} />

Events

getDatasetAtEvent
Looks for the element under the event point, then returns all elements from that dataset. This is used internally for ‘dataset’ mode highlighting. 

1
2
3
4
5
6
7
8
9

const chartOptions = {
  responsive: false
}

<Bar data={this.state.barChartData}
     options={chartOptions}
     width={800}
     height={400}
     getDatasetAtEvent={(dataset, event) => {console.log(dataset)}} />

getElementAtEvent
Calling getElementAtEvent(event) on your Chart instance passing an argument of an event, will return the single element at the event position. If there are multiple items within range, only the first is returned. 

1
2
3
4
5
6
7
8
9

const chartOptions = {
  responsive: false
}

<Bar data={this.state.barChartData}
     options={chartOptions}
     width={800}
     height={400}
     getElementAtEvent={(elems, event) => {console.log(elems)}} />

getElementsAtEvent
A function to be called when mouse clicked on chart elememts, will return all element at that point as an array. 

1
2
3
4
5
6
7
8
9

const chartOptions = {
  responsive: false
}

<Bar data={this.state.barChartData}
     options={chartOptions}
     width={800}
     height={400}
     getElementsAtEvent={(elems, event) => {console.log(elems)}} />

getChart
A function to be called for getting chartjs object. 

1
2
3
4
5
6
7
8
9

const chartOptions = {
  responsive: false
}

<Bar data={this.state.barChartData}
     options={chartOptions}
     width={800}
     height={400}
     getChart={(chart) => {console.log(chart)}} />

getCanvas
A function to be called for getting canvas element. 

1
2
3
4
5
6
7
8
9

const chartOptions = {
  responsive: false
}

<Bar data={this.state.barChartData}
     options={chartOptions}
     width={800}
     height={400}
     getCanvas={(canvas) => {console.log(canvas)}} />

Sample

Bar chart

Bar chart 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import { Bar } from 'react-chartjsx'

export default class App extends Component {
  state = {
    barChartData: {
      labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
      datasets: [
        {
          label: "Population (millions)",
          backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
          data: [2478,5267,734,784,433]
        }
      ]
    }
  }

  constructor(props) {
    super(props)
  }

  render() {
    const chartOptions = {
      responsive: false
    }

    return (
      <div>
        <Bar data={this.state.barChartData}
             options={chartOptions}
             width={800}
             height={400} />
      </div>
    )
  }
}

Line chart

Line chart 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

import { Line } from 'react-chartjsx'

export default class App extends Component {
  state = {
    lineChartData: {
      labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
      datasets: [{
          data: [86,114,106,106,107,111,133,221,783,2478],
          label: "Africa",
          borderColor: "#3e95cd",
          fill: false
        }, {
          data: [282,350,411,502,635,809,947,1402,3700,5267],
          label: "Asia",
          borderColor: "#8e5ea2",
          fill: false
        }, {
          data: [168,170,178,190,203,276,408,547,675,734],
          label: "Europe",
          borderColor: "#3cba9f",
          fill: false
        }, {
          data: [40,20,10,16,24,38,74,167,508,784],
          label: "Latin America",
          borderColor: "#e8c3b9",
          fill: false
        }, {
          data: [6,3,2,2,7,26,82,172,312,433],
          label: "North America",
          borderColor: "#c45850",

          fill: false
        }
      ]
    }
  }

  constructor(props) {
    super(props)
  }

  render() {
    const chartOptions = {
      responsive: false
    }

    return (
      <div>
        <Line data={this.state.lineChartData}
              options={chartOptions}
              width={800}
              height={400} />
      </div>
    )
  }
}

Pie chart

Pie chart 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

import { Pie } from 'react-chartjsx'

export default class App extends Component {
  state = {
    pieChartData: {
      labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
      datasets: [{
        label: "Population (millions)",
        backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
        data: [2478,5267,734,784,433]
      }]
    }
  }

  constructor(props) {
    super(props)
  }

  render() {
    const chartOptions = {
      responsive: false
    }

    return (
      <div>
        <Pie data={this.state.pieChartData}
             options={chartOptions}
             width={800}
             height={400} />
      </div>
    )
  }
}

Radar chart

Radar chart 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

import { Radar } from 'react-chartjsx'

export default class App extends Component {
  state = {
    radarChartData: {
      labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
      datasets: [
        {
          label: "1950",
          fill: true,
          backgroundColor: "rgba(179,181,198,0.2)",
          borderColor: "rgba(179,181,198,1)",
          pointBorderColor: "#fff",
          pointBackgroundColor: "rgba(179,181,198,1)",
          data: [8.77,55.61,21.69,6.62,6.82]
        }, {
          label: "2050",
          fill: true,
          backgroundColor: "rgba(255,99,132,0.2)",
          borderColor: "rgba(255,99,132,1)",
          pointBorderColor: "#fff",
          pointBackgroundColor: "rgba(255,99,132,1)",
          pointBorderColor: "#fff",
          data: [25.48,54.16,7.61,8.06,4.45]
        }
      ]
    }
  }

  constructor(props) {
    super(props)
  }

  render() {
    const chartOptions = {
      responsive: false
    }

    return (
      <div>
        <Radar data={this.state.radarChartData}
               options={chartOptions}
               width={800}
               height={400} />
      </div>
    )
  }
}

Polar area chart

Polar area chart 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import { PolarArea } from 'react-chartjsx'

export default class App extends Component {
  state = {
    polarAreaChartData: {
      labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
      datasets: [
        {
          label: "Population (millions)",
          backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
          data: [2478,5267,734,784,433]
        }
      ]
    }
  }

  constructor(props) {
    super(props)
  }

  render() {
    const chartOptions = {
      responsive: false
    }

    return (
      <div>
        <PolarArea data={this.state.polarAreaChartData}
                   options={chartOptions}
                   width={800}
                   height={400} />
      </div>
    )
  }
}

Doughnut chart

Doughnut chart 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import { Doughnut } from 'react-chartjsx'

export default class App extends Component {
  state = {
    doughnutChartData: {
      labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
      datasets: [
        {
          label: "Population (millions)",
          backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
          data: [2478,5267,734,784,433]
        }
      ]
    }
  }

  constructor(props) {
    super(props)
  }

  render() {
    const chartOptions = {
      responsive: false
    }

    return (
      <div>
        <Doughnut data={this.state.doughnutChartData}
                  options={chartOptions}
                  width={800}
                  height={400} />
      </div>
    )
  }
}

Horizontal bars chart

Horizontal bars chart 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import { HorizontalBar } from 'react-chartjsx'

export default class App extends Component {
  state = {
    horizontalBarsChartData: {
      labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
      datasets: [
        {
          label: "Population (millions)",
          backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
          data: [2478,5267,734,784,433]
        }
      ]
    }
  }

  constructor(props) {
    super(props)
  }

  render() {
    const chartOptions = {
      responsive: false
    }

    return (
      <div>
        <HorizontalBar data={this.state.horizontalBarsChartData}
                       options={chartOptions}
                       width={800}
                       height={400} />
      </div>
    )
  }
}

Grouped bars chart

Grouped bars chart 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

import { Bar } from 'react-chartjsx'

export default class App extends Component {
  state = {
    groupedBarsChartData: {
      labels: ["1900", "1950", "1999", "2050"],
      datasets: [
        {
          label: "Africa",
          backgroundColor: "#3e95cd",
          data: [133,221,783,2478]
        }, {
          label: "Europe",
          backgroundColor: "#8e5ea2",
          data: [408,547,675,734]
        }
      ]
    }
  }

  constructor(props) {
    super(props)
  }

  render() {
    const chartOptions = {
      responsive: false
    }

    return (
      <div>
        <Bar data={this.state.groupedBarsChartData}
             options={chartOptions}
             width={800}
             height={400} />
      </div>
    )
  }
}

Mixed charts

Mixed charts 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

import { Bar } from 'react-chartjsx'

export default class App extends Component {
  state = {
    mixedChartsData: {
      labels: ["1900", "1950", "1999", "2050"],
      datasets: [{
          label: "Europe",
          type: "line",
          borderColor: "#8e5ea2",
          data: [408,547,675,734],
          fill: false
        }, {
          label: "Africa",
          type: "line",
          borderColor: "#3e95cd",
          data: [133,221,783,2478],
          fill: false
        }, {
          label: "Europe",
          type: "bar",
          backgroundColor: "rgba(0,0,0,0.2)",
          data: [408,547,675,734],
        }, {
          label: "Africa",
          type: "bar",
          backgroundColor: "rgba(0,0,0,0.2)",
          backgroundColorHover: "#3e95cd",
          data: [133,221,783,2478]
        }
      ]
    }
  }

  constructor(props) {
    super(props)
  }

  render() {
    const chartOptions = {
      responsive: false
    }

    return (
      <div>
        <Bar data={this.state.mixedChartsData}
             options={chartOptions}
             width={800}
             height={400} />
      </div>
    )
  }
}

Bubble chart

Bubble chart 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

import { Scatter } from 'react-chartjsx'

export default class App extends Component {
  state = {
    scatterChartData: {
      datasets: [
        {
          label: 'Latin America',
          borderColor: "#3e95cd",
          data: [
            {
              x: -10,
              y: 0
            }, {
              x: 0,
              y: 10
            }, {
              x: 10,
              y: 5
            }, {
              x: 20,
              y: 6
            }
          ]
        }, {
          label: 'Asia',
          borderColor: "#8e5ea2",
          data: [
            {
              x: -11,
              y: 1
            }, {
              x: 1,
              y: 11
            }, {
              x: 11,
              y: 6
            }, {
              x: 21,
              y: 7
            }
          ]
        }
      ]
    }
  }

  constructor(props) {
    super(props)
  }

  render() {
    const chartOptions = {
      responsive: false
    }

    return (
      <div>
        <Scatter data={this.state.scatterChartData}
                 options={chartOptions}
                 width={800}
                 height={400} />
      </div>
    )
  }
}

Well, You can read all details on the project’s GitHub repo.