React Bootstrap Charts

React Charts - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

React Bootstrap charts are graphical representations of data. Charts come in different sizes and shapes: bar, line, pie, radar, polar and more.

At your disposal are 6 types of charts and multiple options for customization.

Line chart 

import React from "react";
import { Line } from "react-chartjs-2";
import { MDBContainer } from "mdbreact";

class ChartsPage extends React.Component {
  state = {
    dataLine: {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [
        {
          label: "My First dataset",
          fill: true,
          lineTension: 0.3,
          backgroundColor: "rgba(225, 204,230, .3)",
          borderColor: "rgb(205, 130, 158)",
          borderCapStyle: "butt",
          borderDash: [],
          borderDashOffset: 0.0,
          borderJoinStyle: "miter",
          pointBorderColor: "rgb(205, 130,1 58)",
          pointBackgroundColor: "rgb(255, 255, 255)",
          pointBorderWidth: 10,
          pointHoverRadius: 5,
          pointHoverBackgroundColor: "rgb(0, 0, 0)",
          pointHoverBorderColor: "rgba(220, 220, 220,1)",
          pointHoverBorderWidth: 2,
          pointRadius: 1,
          pointHitRadius: 10,
          data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
          label: "My Second dataset",
          fill: true,
          lineTension: 0.3,
          backgroundColor: "rgba(184, 185, 210, .3)",
          borderColor: "rgb(35, 26, 136)",
          borderCapStyle: "butt",
          borderDash: [],
          borderDashOffset: 0.0,
          borderJoinStyle: "miter",
          pointBorderColor: "rgb(35, 26, 136)",
          pointBackgroundColor: "rgb(255, 255, 255)",
          pointBorderWidth: 10,
          pointHoverRadius: 5,
          pointHoverBackgroundColor: "rgb(0, 0, 0)",
          pointHoverBorderColor: "rgba(220, 220, 220, 1)",
          pointHoverBorderWidth: 2,
          pointRadius: 1,
          pointHitRadius: 10,
          data: [28, 48, 40, 19, 86, 27, 90]
        }
      ]
    }
  };

  render() {
    return (
      <MDBContainer>
        <h3 className="mt-5">Line chart</h3>
        <Line data={this.state.dataLine} options={{ responsive: true }} />
      </MDBContainer>
    );
  }
}

export default ChartsPage;

Radar chart 

import React from "react";
import { Radar } from "react-chartjs-2";
import { MDBContainer } from "mdbreact";


class ChartsPage extends React.Component {
  state = {
    dataRadar: {
      labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
      datasets: [
        {
          label: "My First dataset",
          backgroundColor: "rgba(194, 116, 161, 0.5)",
          borderColor: "rgb(194, 116, 161)",
          data: [65, 59, 90, 81, 56, 55, 40]
        },
        {
          label: "My Second dataset",
          backgroundColor: "rgba(71, 225, 167, 0.5)",
          borderColor: "rgb(71, 225, 167)",
          data: [28, 48, 40, 19, 96, 27,100]
        }
      ]
    }

  }


render() {
    return (
      <MDBContainer>
        <h3 className="mt-5">Radar chart</h3>
        <Radar data={this.state.dataRadar} options={{ responsive: true }} />
      </MDBContainer>
    );
  }
}

export default ChartsPage;

Bar chart 

import React from "react";
import { Bar } from "react-chartjs-2";
import { MDBContainer } from "mdbreact";

class ChartsPage extends React.Component {
  state = {
    dataBar: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [
        {
          label: "% of Votes",
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            "rgba(255, 134,159,0.4)",
            "rgba(98,  182, 239,0.4)",
            "rgba(255, 218, 128,0.4)",
            "rgba(113, 205, 205,0.4)",
            "rgba(170, 128, 252,0.4)",
            "rgba(255, 177, 101,0.4)"
          ],
          borderWidth: 2,
          borderColor: [
            "rgba(255, 134, 159, 1)",
            "rgba(98,  182, 239, 1)",
            "rgba(255, 218, 128, 1)",
            "rgba(113, 205, 205, 1)",
            "rgba(170, 128, 252, 1)",
            "rgba(255, 177, 101, 1)"
          ]
        }
      ]
    },
    barChartOptions: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        xAxes: [
          {
            barPercentage: 1,
            gridLines: {
              display: true,
              color: "rgba(0, 0, 0, 0.1)"
            }
          }
        ],
        yAxes: [
          {
            gridLines: {
              display: true,
              color: "rgba(0, 0, 0, 0.1)"
            },
            ticks: {
              beginAtZero: true
            }
          }
        ]
      }
    }
  }


  render() {
    return (
      <MDBContainer>
        <h3 className="mt-5">Bar chart</h3>
        <Bar data={this.state.dataBar} options={this.state.barChartOptions} />
      </MDBContainer>
    );
  }
}

export default ChartsPage;

Horizontal Bar Chart 

import React from 'react';
import { HorizontalBar } from 'react-chartjs-2';
import { MDBContainer } from 'mdbreact';

class ChartsPage extends React.Component {
  state = {
    dataHorizontal: {
      labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Purple', 'Grey'],
      datasets: [
        {
          label: 'My First Dataset',
          data: [22, 33, 55, 12, 86, 23, 14],
          fill: false,
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(255, 159, 64, 0.2)',
            'rgba(255, 205, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(201, 203, 207, 0.2)'
          ],
          borderColor: [
            'rgb(255, 99, 132)',
            'rgb(255, 159, 64)',
            'rgb(255, 205, 86)',
            'rgb(75, 192, 192)',
            'rgb(54, 162, 235)',
            'rgb(153, 102, 255)',
            'rgb(201, 203, 207)'
          ],
          borderWidth: 1
        }
      ]
    }
  };

  render() {
    return (
      <MDBContainer>
        <h3 className='mt-5'>Bar chart</h3>
        <HorizontalBar
          data={this.state.dataHorizontal}
          options={{ responsive: true }}
        />
      </MDBContainer>
    );
  }
}

export default ChartsPage;

Polar Area Chart 

import React from "react";
import { Polar } from "react-chartjs-2";
import { MDBContainer } from "mdbreact";

class ChartsPage extends React.Component {
  state = {
    dataPolar: {
      datasets: [
        {
          data: [300, 50, 100, 40, 120],
          backgroundColor: [
            "rgba(247, 70, 74, 0.5)",
            "rgba(70, 191, 189, 0.5)",
            "rgba(253, 180, 92, 0.5)",
            "rgba(148, 159, 177, 0.5)",
            "rgba(77, 83, 96, 0.5)"
          ],
          label: "My dataset" // for legend
        }
      ],
      labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey"]
    }
  }

  render() {
    return (
      <MDBContainer>
        <h3 className="mt-5">Polar area chart</h3>
        <Polar data={this.state.dataPolar} options={{ responsive: true }} />
      </MDBContainer>
    );
  }
}

export default ChartsPage;

Pie Chart 

import React from "react";
import { Pie } from "react-chartjs-2";
import { MDBContainer } from "mdbreact";

class ChartsPage extends React.Component {
  state = {
    dataPie: {
      labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey"],
      datasets: [
        {
          data: [300, 50, 100, 40, 120],
          backgroundColor: [
            "#F7464A",
            "#46BFBD",
            "#FDB45C",
            "#949FB1",
            "#4D5360",
            "#AC64AD"
          ],
          hoverBackgroundColor: [
            "#FF5A5E",
            "#5AD3D1",
            "#FFC870",
            "#A8B3C5",
            "#616774",
            "#DA92DB"
          ]
        }
      ]
    }
  }

  render() {
    return (
      <MDBContainer>
        <h3 className="mt-5">Pie chart</h3>
        <Pie data={this.state.dataPie} options={{ responsive: true }} />
      </MDBContainer>
    );
  }
}

export default ChartsPage;

Doughnut Chart 

import React from "react";
import { Doughnut } from "react-chartjs-2";
import { MDBContainer } from "mdbreact";

class ChartsPage extends React.Component {
state = {
  dataDoughnut: {
    labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey"],
    datasets: [
      {
        data: [300, 50, 100, 40, 120],
        backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
        hoverBackgroundColor: [
          "#FF5A5E",
          "#5AD3D1",
          "#FFC870",
          "#A8B3C5",
          "#616774"
        ]
      }
    ]
  }
}

render() {
    return (
    <MDBContainer>
      <h3 className="mt-5">Doughnut chart</h3>
      <Doughnut data={this.state.dataDoughnut} options={{ responsive: true }} />
    </MDBContainer>
    );
  }
}

export default ChartsPage;

Bubble Chart 

import React from 'react';
import { Bubble } from 'react-chartjs-2';
import { MDBContainer } from 'mdbreact';

class ChartsPage extends React.Component {
  state = {
    dataBubble: {
      labels: 'Bubble',
      datasets: [
        {
          label: 'John',
          data: [
            {
              x: 3,
              y: 7,
              r: 10
            }
          ],
          backgroundColor: '#ff6384',
          hoverBackgroundColor: '#ff6384'
        },
        {
          label: 'Peter',
          data: [
            {
              x: 3.2,
              y: 7,
              r: 10
            }
          ],
          backgroundColor: '#44e4ee',
          hoverBackgroundColor: '#44e4ee'
        },
        {
          label: 'Donald',
          data: [
            {
              x: 3.4,
              y: 7,
              r: 10
            }
          ],
          backgroundColor: '#62088A',
          hoverBackgroundColor: '#62088A'
        }
      ]
    }
  };

  render() {
    return (
      <MDBContainer>
        <h3 className='mt-5'>Bar chart</h3>
        <Bubble data={this.state.dataBubble} options={{ responsive: true }} />
      </MDBContainer>
    );
  }
}

export default ChartsPage;

Scatter Chart 

import React from 'react';
import { Scatter, Chart } from 'react-chartjs-2';
import { MDBContainer } from 'mdbreact';

class ChartsPage extends React.Component {
  state = {
    dataScatter: {
      labels: ['Scatter'],
      datasets: [
        {
          borderColor: 'rgba(99,0,125, .2)',
          backgroundColor: 'rgba(99,0,125, .5)',
          label: 'V(node2)',
          data: [
            {
              x: 1,
              y: -1.711e-2
            },
            {
              x: 1.26,
              y: -2.708e-2
            },
            {
              x: 1.58,
              y: -4.285e-2
            },
            {
              x: 2.0,
              y: -6.772e-2
            },
            {
              x: 2.51,
              y: -1.068e-1
            },
            {
              x: 3.16,
              y: -1.681e-1
            },
            {
              x: 3.98,
              y: -2.635e-1
            },
            {
              x: 5.01,
              y: -4.106e-1
            },
            {
              x: 6.31,
              y: -6.339e-1
            },
            {
              x: 7.94,
              y: -9.659e-1
            },
            {
              x: 10.0,
              y: -1.445
            },
            {
              x: 12.6,
              y: -2.11
            },
            {
              x: 15.8,
              y: -2.992
            },
            {
              x: 20.0,
              y: -4.102
            },
            {
              x: 25.1,
              y: -5.429
            },
            {
              x: 31.6,
              y: -6.944
            },
            {
              x: 39.8,
              y: -8.607
            },
            {
              x: 50.1,
              y: -1.038e1
            },
            {
              x: 63.1,
              y: -1.223e1
            },
            {
              x: 79.4,
              y: -1.413e1
            },
            {
              x: 100.0,
              y: -1.607e1
            },
            {
              x: 126,
              y: -1.803e1
            },
            {
              x: 158,
              y: -2e1
            },
            {
              x: 200,
              y: -2.199e1
            },
            {
              x: 251,
              y: -2.398e1
            },
            {
              x: 316,
              y: -2.597e1
            },
            {
              x: 398,
              y: -2.797e1
            },
            {
              x: 501,
              y: -2.996e1
            },
            {
              x: 631,
              y: -3.196e1
            },
            {
              x: 794,
              y: -3.396e1
            },
            {
              x: 1000,
              y: -3.596e1
            }
          ]
        }
      ]
    },
    optionsScatter: {
      title: {
        display: true,
        text: 'Scatter Chart - Logarithmic X-Axis'
      },
      scales: {
        xAxes: [
          {
            type: 'logarithmic',
            position: 'bottom',
            ticks: {
              userCallback: function(tick) {
                var remain =
                  tick / Math.pow(10, Math.floor(Chart.helpers.log10(tick)));
                if (remain === 1 || remain === 2 || remain === 5) {
                  return tick.toString() + 'Hz';
                }
                return '';
              }
            },
            scaleLabel: {
              labelString: 'Frequency',
              display: true
            }
          }
        ],
        yAxes: [
          {
            type: 'linear',
            ticks: {
              userCallback: function(tick) {
                return tick.toString() + 'dB';
              }
            },
            scaleLabel: {
              labelString: 'Voltage',
              display: true
            }
          }
        ]
      }
    }
  };

  render() {
    return (
      <MDBContainer>
        <h3 className='mt-5'>Bar chart</h3>
        <Scatter
          data={this.state.dataScatter}
          options={this.state.optionsScatter}
        />
      </MDBContainer>
    );
  }
}

export default ChartsPage;

Minimalist charts MDB Pro component

0
Sales
0
ROI
0
Conversion 
import React from "react";
import {
  MDBContainer,
  MDBRow,
  MDBCol,
  MDBIcon,
  MDBSimpleChart
} from "mdbreact";

class ChartsPagePro extends React.Component {
  render() {
    return (
      <MDBContainer>
        <h3 className="mt-5">Minimalistic charts</h3>
        <div style={{ marginTop: "100px" }}>
          <MDBContainer>
            <MDBRow className="text-center">
              <MDBCol sm="4">
                <MDBSimpleChart
                  width={100}
                  height={100}
                  strokeWidth={3}
                  percent={56}
                  strokeColor="#4FB64E"
                  labelFontWeight="300"
                  labelColor="#000"
                />
                <h6 className="mt-5">
                  <span className="label green p-1 white-text">
                    <strong>Sales</strong>
                    <MDBIcon icon="arrow-circle-up" className="ml-1" />
                  </span>
                </h6>
              </MDBCol>
              <MDBCol sm="4">
                <MDBSimpleChart
                  width={100}
                  height={100}
                  strokeWidth={3}
                  percent={76}
                  strokeColor="#EA3C3B"
                  labelFontWeight="300"
                  labelColor="#000"
                />
                <h6 className="mt-5">
                  <span className="label red p-1 white-text">
                    <strong>ROI</strong>
                    <MDBIcon icon="arrow-circle-down" className="ml-1" />
                  </span>
                </h6>
              </MDBCol>
              <MDBCol sm="4">
                <MDBSimpleChart
                  width={100}
                  height={100}
                  strokeWidth={3}
                  percent={100}
                  strokeColor="#9D9D9D"
                  labelFontWeight="300"
                  labelColor="#000"
                />
                <h6 className="mt-5">
                  <span className="label grey p-1 white-text">
                    <strong>Conversion</strong>
                    <MDBIcon icon="minus-square" className="ml-1" />
                  </span>
                </h6>
              </MDBCol>
            </MDBRow>
          </MDBContainer>
        </div>
      </MDBContainer>
    );
  }
}

export default ChartsPagePro;

React Charts - API

In this section, you will find advanced information about the Line, Radar, Bar, Polar, Pie, Doughnut components. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

API Reference: Options

In order to use Charts components make sure you have imported proper module first.

import { Line, Radar, Bar, Polar, Pie, Doughnut } from "react-chartjs-2";

The table below shows the configuration options of the components.

Line

Name Type Default Description Example
showLines Boolean true If false, the lines between points are not drawn. showLines: false
spanGaps Boolean false If false, NaN data causes a break in the line. spanGaps: true
scales Object - Changes the scale settings in the charts scales: { yAxes: [ { ticks: { max: 100, min: -100 } } ] }

Radar

Name Type Default Description Example
scale Object - Changes the scale settings in the charts scale: { display: false, ticks: { max: 250 } }
startAngle number -0.5 * Math.PI Starting angle to draw arcs for the first item in a dataset. startAngle: 3 * Math.PI

Bar

Name Type Default Description Example
scales Object - Changes the scale settings in the charts scales: { yAxes: [ { ticks: { max: 100, min: -100 } } ] }

Polar

Name Type Default Description Example
startAngle number -0.5 * Math.PI Starting angle to draw arcs for the first item in a dataset. startAngle: 3 * Math.PI
animation.animateRotate Boolean true If true, the chart will animate in with a rotation animation. This property is in the options.animation object. animation: { animateRotate: false }
animation.animateScale Boolean true If true, will animate scaling the chart from the center outwards. animation: { animateScale: false }
scale Object - Changes the scale settings in the charts scale: { display: false, ticks: { max: 250 } }

Doughnut & Pie

Name Type Default Description Example
rotation number -0.5 * Math.PI Starting angle to draw arcs from. rotation: 3 * Math.PI
circumference number 2 * Math.PI Sweep to allow arcs to cover. circumference: 3 * Math.PI
animation.animateRotate Boolean true If true, the chart will animate in with a rotation animation. This property is in the options.animation object. animation: { animateRotate: false }
animation.animateScale Boolean true If true, will animate scaling the chart from the center outwards. animation: { animateScale: false }
cutoutPercentage number 50 - for doughnut, 0 - for pie The percentage of the chart that is cut out of the middle. cutoutPercentage: 30

MDBSimpleChart - Component MDB Pro component

In this section, you will find advanced information about the MDBSimpleChart component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Import statement

In order to use MDBSimpleChart component make sure you have imported proper module first.

import { MDBSimpleChart } from "mdbreact";

API Reference: Properties MDB Pro component

The table below shows the configuration options of the MDBSimpleChart component.

Name Type Default Description Example
width number 150 Chart width <MDBSimpleChart width={100} >
height number 150 Chart height <MDBSimpleChart height="100" >
strokeWidth number 10 The stroke width of the chart in pixels. <MDBSimpleChart strokeWidth={4} >
strokeColor string '#408AE5' The stroke colour of the charts. <MDBSimpleChart strokeColor="#4FB64E" >
labelFontWeight string 'bold' Label font weight <MDBSimpleChart labelFontWeight="light" >
labelFontSize string '1.2em' Label font size <MDBSimpleChart labelFontSize="2rem" >
fillColor string 'none' The fill color whithin the circle. <MDBSimpleChart fillColor="red" >
percent number 'none' The percentage shown on the chart <MDBSimpleChart percent={56} >