Rate these docs

React Bootstrap Charts

React Charts - Bootstrap 4 & Material Design

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: false,
                  lineTension: 0.1,
                  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: [65, 59, 80, 81, 56, 55, 40]
                }
              ]
            }
          }

        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: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
              datasets: [
                {
                  label: "#1",
                  backgroundColor: "rgba(245, 74, 85, 0.5)",
                  data: [65, 59, 80, 81, 56, 55, 40]
                },
                {
                  label: "#2",
                  backgroundColor: "rgba(90, 173, 246, 0.5)",
                  data: [12, 42, 121, 56, 24, 12, 2]
                },
                {
                  label: "#3",
                  backgroundColor: "rgba(245, 192, 50, 0.5)",
                  data: [2, 123, 154, 76, 54, 23, 5]
                }
              ]
            }

          }


        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: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
              datasets: [
                {
                  label: "#1",
                  data: [12, 39, 3, 50, 2, 32, 84],
                  backgroundColor: "rgba(245, 74, 85, 0.5)",
                  borderWidth: 1
                },
                {
                  label: "#2",
                  data: [56, 24, 5, 16, 45, 24, 8],
                  backgroundColor: "rgba(90, 173, 246, 0.5)",
                  borderWidth: 1
                },
                {
                  label: "#3",
                  data: [12, 25, 54, 3, 15, 44, 3],
                  backgroundColor: "rgba(245, 192, 50, 0.5)",
                  borderWidth: 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">Radar chart</h3>
                <Bar data={this.state.dataBar} options={this.state.barChartOptions} />
              </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: [11, 16, 7, 3, 14],
                backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
                label: "My dataset" // for legend
              }
            ],
            labels: ["Jan", "Feb", "Mar", "Apr", "May"]
          }
        }

        render() {
            return (
              <MDBContainer>
                <h3 className="mt-5">Radar 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: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
            datasets: [
              {
                data: [300, 50, 100, 40, 120, 24, 52],
                backgroundColor: [
                  "#F7464A",
                  "#46BFBD",
                  "#FDB45C",
                  "#949FB1",
                  "#4D5360",
                  "#ac64ad"
                ],
                hoverBackgroundColor: [
                  "#FF5A5E",
                  "#5AD3D1",
                  "#FFC870",
                  "#A8B3C5",
                  "#616774",
                  "#da92db"
                ]
              }
            ]
          }
        }

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

        export default ChartsPage;
      

Minimalist charts MDB Pro component

Sales
ROI
Conversion

        import React from "react";
        import { MDBContainer, MDBRow, MDBCol, MDBIcon, MDBSimpleChart } from "mdbreact";

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

        export default ChartsPagePro;
      

Charts - API

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

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} >