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