Bootstrap charts

Simple, clean and interactive charts.


Line chart


import React from 'react';
import { Line } from 'react-chartjs-2';
import { Container } from 'mdbreact';

// Line chart
const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [
    {
      label: 'My First dataset',
      fill: false,
      lineTension: 0.1,
      backgroundColor: '#848484',
      borderColor: '#848484',
      borderCapStyle: 'butt',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: '#848484',
      pointBackgroundColor: '#fff',
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: '#848484',
      pointHoverBorderColor: 'rgba(220,220,220,1)',
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [65, 59, 80, 81, 56, 55, 40]
    }
  ]
};

class ChartsPage extends React.Component {
  render() {
    return (
    <Container>
        <Line data={data} />
    </Container>
    );
  }
 
};

export default ChartsPage;

Required packages

In order to use the chart components found here in MDB, be sure to install the following npm packages and save them as dependencies: react-chartjs-2, chart.js, salad-ui.chart.


Radar Chart


import React from 'react';
import { Chart } from 'react-chartjs-2';
import { Container } from 'mdbreact';

class ChartsPage extends React.Component {
    componentDidMount() {
      // Radar chart
      const ctxR = document.getElementById("radarChart").getContext('2d');
      new Chart(ctxR, {
        type: 'radar',
        data: {
          labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
          datasets: [
            {
              label: "My First dataset",
              fillColor: "rgba(220,220,220,0.2)",
              strokeColor: "rgba(220,220,220,1)",
              pointColor: "rgba(220,220,220,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(220,220,220,1)",
              data: [65, 59, 90, 81, 56, 55, 40]
            },
            {
              label: "My Second dataset",
              fillColor: "rgba(151,187,205,0.2)",
              strokeColor: "rgba(151,187,205,1)",
              pointColor: "rgba(151,187,205,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(151,187,205,1)",
              data: [28, 48, 40, 19, 96, 27, 100]
            }
          ]
        },
        options: {
            responsive: true
        }   
      });
    }
  render() {
    return (
    <Container>
        <canvas id="radarChart"></canvas>
    </Container>
    );
  }
 
};

export default ChartsPage;    

            

Bar Chart


import React from 'react';
import { Chart } from 'react-chartjs-2';
import { Container } from 'mdbreact';

class ChartsPage extends React.Component {
    componentDidMount() {
        // Bar chart
        var ctxB = document.getElementById("barChart").getContext('2d');
        new Chart(ctxB, {
          type: 'bar',
          data: {
              labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
              datasets: [{
                  label: '# of Votes',
                  data: [12, 19, 3, 5, 2, 3],
                  backgroundColor: [
                      'rgba(255, 99, 132, 0.2)',
                      'rgba(54, 162, 235, 0.2)',
                      'rgba(255, 206, 86, 0.2)',
                      'rgba(75, 192, 192, 0.2)',
                      'rgba(153, 102, 255, 0.2)',
                      'rgba(255, 159, 64, 0.2)'
                  ],
                  borderColor: [
                      'rgba(255,99,132,1)',
                      'rgba(54, 162, 235, 1)',
                      'rgba(255, 206, 86, 1)',
                      'rgba(75, 192, 192, 1)',
                      'rgba(153, 102, 255, 1)',
                      'rgba(255, 159, 64, 1)'
                  ],
                  borderWidth: 1
              }]
          },
          options: {
              scales: {
                  yAxes: [{
                      ticks: {
                          beginAtZero:true
                      }
                  }]
              }
          }
        });
    }
    render() {
        return (
        <Container>
          <canvas id="barChart"></canvas>
        </Container>
        );
    }
 
};

export default ChartsPage;   
            

Polar Area Chart


import React from 'react';
import { Chart } from 'react-chartjs-2';
import { Container } from 'mdbreact';

class ChartsPage extends React.Component {
    componentDidMount() {
        // Polar chart
        var ctxPA = document.getElementById("polarChart").getContext('2d');
        new Chart(ctxPA, {
          type: 'polarArea',
          data: {
              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"]
                  }
              ]
          },
          options: {
              responsive: true
          }    
        });
    }
    render() {
        return (
        <Container>
          <canvas id="polarChart"></canvas>
        </Container>
        );
    }
 
};

export default ChartsPage; 
            

Pie Chart


import React from 'react';
import { Chart } from 'react-chartjs-2';
import { Container } from 'mdbreact';

class ChartsPage extends React.Component {
    componentDidMount() {
        // Pie chart
        var ctxP = document.getElementById("pieChart").getContext('2d');
        new Chart(ctxP, {
            type: 'pie',
            data: {
                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"]
                    }
                ]
            },
            options: {
                responsive: true
            }    
        });
    }
    render() {
        return (
        <Container>
          <canvas id="pieChart"></canvas>
        </Container>
        );
    }
 
};

export default ChartsPage; 
            

Doughnut Chart


import React from 'react';
import { Chart } from 'react-chartjs-2';
import { Container } from 'mdbreact';

class ChartsPage extends React.Component {
    componentDidMount() {
        //doughnut
        var ctxD = document.getElementById("doughnutChart").getContext('2d');
        new Chart(ctxD, {
            type: 'doughnut',
            data: {
                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"]
                    }
                ]
            },
            options: {
                responsive: true
            }    
        });
    }
    render() {
        return (
        <Container>
          <canvas id="doughnutChart"></canvas>
        </Container>
        );
    }
 
};

export default ChartsPage; 
            

Minimalist charts MDB Pro component

Sales
ROI
Conversion

import React from 'react';
import { CirclePie } from 'salad-ui.chart';
import { Container } from 'mdbreact';

class ChartsPage extends React.Component {
    componentDidMount() {
        //doughnut
        var ctxD = document.getElementById("doughnutChart").getContext('2d');
        var myLineChart = new Chart(ctxD, {
            type: 'doughnut',
            data: {
                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"]
                    }
                ]
            },
            options: {
                responsive: true
            }    
        });
    }
    render() {
        return (
        <Container>
          <Row className="text-center">
            <Col sm="4">
              <CirclePie width={100} height={100} strokeWidth={3} percent={56} strokeColor="#4FB64E" />
              <h6 className="mt-2"><span className="label green p-1 white-text">Sales <Fa icon="arrow-circle-up" /></span></h6>
            </Col>
            <Col sm="4">
              <CirclePie width={100} height={100} strokeWidth={3} percent={76} strokeColor="#EA3C3B" />
              <h6 className="mt-2"><span className="label red p-1 white-text">ROI <Fa icon="arrow-circle-down" /></span></h6>
            </Col>
            <Col sm="4">
              <CirclePie width={100} height={100} strokeWidth={3} percent={100} strokeColor="#9D9D9D" />
              <h6 className="mt-2"><span className="label grey p-1 white-text">Conversion <Fa icon="minus-square" /></span></h6>
            </Col>
          </Row>
        </Container>
        );
    }
 
};

export default ChartsPage;