Charts
Bootstrap 5 Charts
MDB charts are visual representations of data. They are responsive and easy to customize. At your disposal are eight types of charts with multiple options for customization.
Note: Read the API tab to find all available options and advanced customization.
Note 2: See also advanced charts documentation to see an implementation of the advanced options.
Bar chart
You can initialize simple charts with data-mdb-attributes - it doesn't require
any additional JS code.
Note: This method allows only one dataset - more complicated charts require JavaScript initialization.
Via data-mdb-attributes:
<canvas
data-mdb-chart="bar"
data-mdb-dataset-label="Traffic"
data-mdb-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
data-mdb-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]"
></canvas>
The same effect achieved via Javascript initialization:
<canvas id="bar-chart"></canvas>
// Chart
const dataBar = {
type: 'bar',
data: {
labels: ['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday '],
datasets: [
{
label: 'Traffic',
data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
},
],
},
};
new mdb.Chart(document.getElementById('bar-chart'), dataBar);
Line chart
To use our minimalistic line chart, set the type option to line.
Via data-mdb-attributes:
<canvas
data-mdb-chart="line"
data-mdb-dataset-label="Traffic"
data-mdb-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
data-mdb-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]"
></canvas>
Via JavaScript:
<canvas id="line-chart"></canvas>
// Chart
const dataLine = {
type: 'line',
data: {
labels: ['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday '],
datasets: [
{
label: 'Traffic',
data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
},
],
},
};
new mdb.Chart(document.getElementById('line-chart'), dataLine);
Bar chart horizontal
Change the orientation of your bar chart from vertical to horizontal by setting
the indexAxis option to 'y'.
<canvas id="bar-chart-horizontal"></canvas>
// Chart
const dataBarHorizontal = {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Traffic',
data: [30, 15, 62, 65, 61, 65, 40],
},
],
},
};
const optionsBarHorizontal = {
options: {
indexAxis: 'y',
scales: {
x: {
stacked: true,
grid: {
display: true,
borderDash: [2],
zeroLineColor: 'rgba(0,0,0,0)',
zeroLineBorderDash: [2],
zeroLineBorderDashOffset: [2],
},
ticks: {
color: 'rgba(0,0,0, 0.5)',
},
},
y: {
stacked: true,
grid: {
display: false,
},
ticks: {
color: 'rgba(0,0,0, 0.5)',
},
},
},
},
};
new mdb.Chart(document.getElementById('bar-chart-horizontal'), dataBarHorizontal, optionsBarHorizontal);
Pie chart
A chart with the type pie splits the circle into several pieces to represent a
dataset's values as an area's percentage.
Via data-mdb-attributes:
<canvas
data-mdb-chart="pie"
data-mdb-dataset-label="Traffic"
data-mdb-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
data-mdb-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]"
data-mdb-dataset-background-color="['rgba(63, 81, 181, 0.5)', 'rgba(77, 182, 172, 0.5)', 'rgba(66, 133, 244, 0.5)', 'rgba(156, 39, 176, 0.5)', 'rgba(233, 30, 99, 0.5)', 'rgba(66, 73, 244, 0.4)', 'rgba(66, 133, 244, 0.2)']"
></canvas>
Via JavaScript:
<canvas id="pie-chart"></canvas>
// Chart
const dataPie = {
type: 'pie',
data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
datasets: [
{
label: 'Traffic',
data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
backgroundColor: [
'rgba(63, 81, 181, 0.5)',
'rgba(77, 182, 172, 0.5)',
'rgba(66, 133, 244, 0.5)',
'rgba(156, 39, 176, 0.5)',
'rgba(233, 30, 99, 0.5)',
'rgba(66, 73, 244, 0.4)',
'rgba(66, 133, 244, 0.2)',
],
},
],
},
};
new mdb.Chart(document.getElementById('pie-chart'), dataPie);
Doughnut chart
Another type of graph representing data as an area's percentage is a doughnut chart.
Via data-mdb-attributes:
<canvas
data-mdb-chart="doughnut"
data-mdb-dataset-label="Traffic"
data-mdb-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
data-mdb-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]"
data-mdb-dataset-background-color="['rgba(63, 81, 181, 0.5)', 'rgba(77, 182, 172, 0.5)', 'rgba(66, 133, 244, 0.5)', 'rgba(156, 39, 176, 0.5)', 'rgba(233, 30, 99, 0.5)', 'rgba(66, 73, 244, 0.4)', 'rgba(66, 133, 244, 0.2)']"
></canvas>
Via JavaScript:
<canvas id="doughnut-chart"></canvas>
// Chart
const dataDoughnut = {
type: 'doughnut',
data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
datasets: [
{
label: 'Traffic',
data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
backgroundColor: [
'rgba(63, 81, 181, 0.5)',
'rgba(77, 182, 172, 0.5)',
'rgba(66, 133, 244, 0.5)',
'rgba(156, 39, 176, 0.5)',
'rgba(233, 30, 99, 0.5)',
'rgba(66, 73, 244, 0.4)',
'rgba(66, 133, 244, 0.2)',
],
},
],
},
};
new mdb.Chart(document.getElementById('doughnut-chart'), dataDoughnut);
Polar chart
Polar area graph will split the circle into pieces with equal angles and different radius.
Via data-mdb-attributes:
<canvas
data-mdb-chart="polarArea"
data-mdb-dataset-label="Traffic"
data-mdb-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
data-mdb-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]"
data-mdb-dataset-background-color="['rgba(63, 81, 181, 0.5)', 'rgba(77, 182, 172, 0.5)', 'rgba(66, 133, 244, 0.5)', 'rgba(156, 39, 176, 0.5)', 'rgba(233, 30, 99, 0.5)', 'rgba(66, 73, 244, 0.4)', 'rgba(66, 133, 244, 0.2)']"
></canvas>
Via JavaScript:
<canvas id="polar-area-chart"></canvas>
// Chart
const dataPolar = {
type: 'polarArea',
data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
datasets: [
{
label: 'Traffic',
data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
backgroundColor: [
'rgba(63, 81, 181, 0.5)',
'rgba(77, 182, 172, 0.5)',
'rgba(66, 133, 244, 0.5)',
'rgba(156, 39, 176, 0.5)',
'rgba(233, 30, 99, 0.5)',
'rgba(66, 73, 244, 0.4)',
'rgba(66, 133, 244, 0.2)',
],
},
],
},
};
new mdb.Chart(document.getElementById('polar-area-chart'), dataPolar);
Radar chart
This type of chart will enclose the area based on a dataset's values.
Via data-mdb-attributes:
<canvas
data-mdb-chart="radar"
data-mdb-dataset-label="Traffic"
data-mdb-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
data-mdb-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]"
></canvas>
Via JavaScript:
<canvas id="radar-chart"></canvas>
// Chart
const dataRadar = {
type: 'radar',
data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
datasets: [
{
label: 'Traffic',
data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
},
],
},
};
new mdb.Chart(document.getElementById('radar-chart'), dataRadar);
Bubble chart
This graph visualizes data in a series of "bubbles" with customized coordinates and radius.
Note: As mentioned before, charts with more than 1 dataset be used via data-mdb-attributes. All more complicated structures require initialization via JavaScript.
<canvas id="bubble-chart"></canvas>
// Chart
const dataBubble = {
type: 'bubble',
data: {
datasets: [
{
label: 'John',
data: [
{
x: 3,
y: 7,
r: 10,
},
],
backgroundColor: '#ff6384',
hoverBackgroundColor: '#ff6384',
},
{
label: 'Peter',
data: [
{
x: 5,
y: 7,
r: 10,
},
],
backgroundColor: '#44e4ee',
hoverBackgroundColor: '#44e4ee',
},
{
label: 'Donald',
data: [
{
x: 7,
y: 7,
r: 10,
},
],
backgroundColor: '#62088A',
hoverBackgroundColor: '#62088A',
},
],
},
};
new mdb.Chart(document.getElementById('bubble-chart'), dataBubble);
Scatter chart
Use this chart to represent your data as a series of points with x and y coordinates.
Note: This chart also requires initialization via JavaScript. Initialization via data-mdb-attributes is not possible.
<canvas id="scatter-chart"></canvas>
// Chart
const dataScatter = {
type: 'scatter',
data: {
datasets: [
{
borderColor: '#4285F4',
backgroundColor: 'rgba(66, 133, 244, 0.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,
},
],
},
],
},
};
const optionsScatter = {
options: {
title: {
display: true,
text: 'Scatter Chart - Logarithmic X-Axis',
},
scales: {
x:
{
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,
},
},
y:
{
type: 'linear',
ticks: {
userCallback: function (tick) {
return tick.toString() + 'dB';
},
},
scaleLabel: {
labelString: 'Voltage',
display: true,
},
},
},
},
};
new mdb.Chart(document.getElementById('scatter-chart'), dataScatter, optionsScatter);
Bar chart with custom options
MDB provides default options for each chart - you can easily change that by passing an object with your custom options to the Chart constructor.
Note: Read API tab to learn more about available options.
<canvas id="bar-chart-custom-options"></canvas>
// Bar chart with custom options
const dataBarCustomOptions = {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Traffic',
data: [30, 15, 62, 65, 61, 6],
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,
},
],
},
};
const optionsBarCustomOptions = {
options: {
plugins: {
legend: {
labels: {
color: 'green'
position: 'top',
}
},
scales: {
x:
{
ticks: {
color: '#4285F4',
},
},
y:
{
ticks: {
color: '#f44242',
},
},
},
},
},
};
new mdb.Chart(
document.getElementById('bar-chart-custom-options'),
dataBarCustomOptions,
optionsBarCustomOptions
);
Bar chart with custom tooltip
Set custom text format inside a tooltip by using plugins option.
<canvas id="bar-chart-custom-tooltip"></canvas>
// Bar chart with custom tooltip
const dataBarCustomTooltip = {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Traffic',
data: [30, 15, 62, 65, 61, 65, 40],
},
],
},
};
const optionsBarCustomTooltip = {
options: {
plugins: {
tooltip: {
callbacks: {
label: function (context) {
let label = context.dataset.label || '';
label = `${label}: ${context.formattedValue} users`;
return label;
},
},
},
},
},
};
new mdb.Chart(
document.getElementById('bar-chart-custom-tooltip'),
dataBarCustomTooltip,
optionsBarCustomTooltip);
Charts - API
In this section, you will find advanced information about the
Chart 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.
Usage
Via data attributes
You can initialize a simple chart without using additional JavaScript code - just set
data-mdb-chart to a selected chart's type (f.e. 'line', 'bar').
Note: Scatter and bubble charts has to be initialized with
JavaScript.
| Name | Type | Description |
|---|---|---|
data-mdb-chart
|
String | Attribute responsible for initialization and defining a type. |
data-mdb-labels
|
String | Labels for x-axis |
data-mdb-dataset-label
|
String | Label values for datasets |
data-mdb-dataset-background-color
|
Color[ ] | A single color or an array of colors for datasets |
data-mdb-dataset-border-color
|
Color[ ] | A single border or line color or an array of border colors for datasets |
data-mdb-dataset-border-width
|
Number[ ] | Single border thickness or a border thickness table for datasets |
data-mdb-dataset-data
|
Number[ ] | Value sets for charts |
<canvas
class="col-sm-12 col-md-10 col-xl-8 mb-4"
data-mdb-chart="bar"
data-mdb-dataset-label="Traffic"
data-mdb-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
data-mdb-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]"
></canvas>
Via JavaScript
When using the Chart constructor to initialize an instance, you can specify three parameters.
The first argument is a wrapper element for a chart, second is a data object with
necessary information about displayed datasets. The last are options - each Chart
has its default settings provided by the component, so this parameter is optional.
<canvas id="bar-chart"></canvas>
// Bar chart
const dataBar = {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Traffic',
data: [30, 15, 62, 65, 61, 65, 40],
},
],
},
};
new mdb.Chart(document.getElementById('bar-chart'), dataBar);
Via jQuery
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
<canvas id="bar-chart"></canvas>
// Bar chart
const dataBar = {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Traffic',
data: [30, 15, 62, 65, 61, 65, 40],
},
],
},
};
$(document).ready(() => {
$('#bar-chart').chart(dataBar);
});
Options
Line options
The line chart allows specifying several properties for each dataset. Besides, some of them (f.e. all point* properties) can be defined as an array - this way the first value applies to the first point, the second to the second point, etc.
| Name | Type | Description |
|---|---|---|
label
|
String | The label for the dataset that appears in the legend and tooltips. |
xAxisID
|
String | The ID of the x-axis to plot this dataset on. If not specified, this defaults to the ID of the first found x-axis |
yAxisID
|
String | The ID of the y-axis to plot this dataset on. If not specified, this defaults to the ID of the first found y-axis. |
backgroundColor
|
Color | The fill color under the line. |
borderColor
|
Color | The color of the line. |
borderWidth
|
Number | The width of the line in pixels. |
borderDash
|
Number | The length and spacing of dashes. |
borderDashOffset
|
Number | Offset for line dashes. |
borderCapStyle
|
String | Cap style of the line. |
borderJoinStyle
|
String | Line joint style. |
cubicInterpolationMode
|
String | The algorithm used to interpolate a smooth curve from the discrete data points. |
fill
|
Boolean/String | How to fill the area under the line. |
lineTension
|
Number | Bezier curve tension of the line. Set to 0 to draw straight lines. This option is ignored if monotone cubic interpolation is used. |
pointBackgroundColor
|
Color/Color[ ] | The fill color for points. |
pointBorderColor
|
Color/Color[ ] | The border color for points. |
pointBorderWidth
|
Number/Number[ ] | The width of the point border in pixels. |
pointRadius
|
Number/Number[ ] | The radius of the point shape. If set to 0, the point is not rendered. |
pointStyle
|
String/String[ ]/Image/Image[ ] | Style of the point. |
pointRotation
|
Number/Number[ ] | The rotation of the point in degrees. |
pointHitRadius
|
Number/Number[ ] | The pixel size of the non-displayed point that reacts to mouse events. |
pointHoverBackgroundColor
|
Color/Color[ ] | Point background color when hovered. |
pointHoverBorderColor
|
Color/Color[ ] | Point border color when hovered. |
pointHoverBorderWidth
|
Number/Number[ ] | The border width of a point when hovered over. |
pointHoverRadius
|
Number/Number[ ] | The radius of the point when hovered over. |
showLine
|
Boolean | If false, the line is not drawn for this dataset. |
spanGaps
|
Boolean | If true, lines will be drawn between points with no or null data. If false, points with NaN data will create a break in the line |
steppedLine
|
Boolean/String | If the line is shown as a stepped line. |
Bar options
The bar chart allows specifying several properties for each dataset. Besides, some of them can be defined as an array - this way the first value applies to the first bar, the second to the second bar, etc.
| Name | Type | Description |
|---|---|---|
label
|
String | The label for the dataset which appears in the legend and tooltips. |
xAxisID
|
String | The ID of the x axis to plot this dataset on. If not specified, this defaults to the ID of the first found x axis |
yAxisID
|
String | The ID of the y axis to plot this dataset on. If not specified, this defaults to the ID of the first found y axis. |
backgroundColor
|
Color/Color[ ] | The fill color of the bar. |
borderColor
|
Color/Color[ ] | The color of the bar border. |
borderWidth
|
Number/Number[ ] | The stroke width of the bar in pixels. |
borderSkipped
|
String | Which edge to skip drawing the border for. |
hoverBackgroundColor
|
Color/Color[ ] | The fill colour of the bars when hovered. |
hoverBorderColor
|
Color/Color[ ] | The stroke colour of the bars when hovered. |
hoverBorderWidth
|
Number/Number[ ] | The stroke width of the bars when hovered. |
Radar chart
The radar chart allows specifying several properties for each dataset. Besides, some of them (f.e. all point* properties) can be defined as an array - this way the first value applies to the first point, the second to the second point, etc.
| Name | Type | Description |
|---|---|---|
label
|
String | The label for the dataset which appears in the legend and tooltips. |
backgroundColor
|
Color | The fill color under the line. |
borderColor
|
Color | The color of the line. |
borderWidth
|
Number | The width of the line in pixels. |
borderDash
|
Number[ ] | Length and spacing of dashes. S |
borderDashOffset
|
Number | Offset for line dashes. |
borderCapStyle
|
String | Cap style of the line |
borderJoinStyle
|
String | Line joint style |
fill
|
Boolean/String | How to fill the area under the line. |
lineTension
|
Number | Bezier curve tension of the line. Set to 0 to draw straightlines. |
pointBackgroundColor
|
Color/Color[ ] | The fill color for points. |
pointBorderColor
|
Color/Color[ ] | The border color for points. |
pointBorderWidth
|
Number/Number[ ] | The width of the point border in pixels. |
pointRadius
|
Number/Number[ ] | TThe radius of the point shape. If set to 0, the point is not rendered. |
pointRotation
|
Number/Number[ ] | The rotation of the point in degrees. |
pointStyle
|
String/String[ ]/Image/Image[ ] | Style of the point. |
pointHitRadius
|
Number/Number[ ] | The pixel size of the non-displayed point that reacts to mouse events. |
pointHoverBackgroundColor
|
Color/Color[ ] | Point background color when hovered. |
pointHoverBorderColor
|
Color/Color[ ] | Point border color when hovered. |
pointHoverBorderWidth
|
Number/Number[ ] | Border width of point when hovered. |
pointHoverRadius
|
Number/Number[ ] | The radius of the point when hovered. |
Doughnut and Pie
In Doughnut and Pie charts passing an array of values to an option will apply each of them to a corresponding entry in a dataset.
| Name | Type | Description |
|---|---|---|
backgroundColor
|
Color[ ] | The fill color of the arcs in the dataset. |
borderColor
|
Color[ ] | The border color of the arcs in the dataset. |
borderWidth
|
Number[ ] | The border width of the arcs in the dataset. |
hoverBackgroundColor
|
Color[ ] | The fill colour of the arcs when hovered. |
hoverBorderColor
|
Color[ ] | The stroke colour of the arcs when hovered. |
hoverBorderWidth
|
Number[ ] | The stroke width of the arcs when hovered. |
Polar Area chart
Polar area charts are similar to pie charts, but each segment has the same angle and differs in the radius (depending on the value).
| Name | Type | Description |
|---|---|---|
backgroundColor
|
Color | The fill color of the arcs in the dataset. |
borderColor
|
Color | The border color of the arcs in the dataset. |
borderWidth
|
number | The border width of the arcs in the dataset. |
hoverBackgroundColor
|
Color | The fill colour of the arcs when hovered. |
hoverBorderColor
|
Color | The stroke colour of the arcs when hovered. |
hoverBorderWidth
|
number | The stroke width of the arcs when hovered. |
Bubble chart
A bubble chart displays a series of points with x and y coordinates. The z coordinate determines the size of each bubble.
| Name | Type | Description |
|---|---|---|
backgroundColor
|
Color | bubble background color |
borderColor
|
Color | bubble border color |
borderWidth
|
Number | bubble border width (in pixels) |
hoverBackgroundColor
|
Color | bubble background color when hovered |
hoverBorderColor
|
Color | bubble border color when hovered |
hoverBorderWidth
|
Number | bubble border width when hovered (in pixels) |
hoverRadius
|
Number | bubble additional radius when hovered (in pixels) |
hitRadius
|
Number | bubble additional radius for hit detection (in pixels). |
label
|
String | The label for the dataset which appears in the legend and tooltips. |
order
|
Number | The drawing order of dataset. |
pointStyle
|
String | bubble shape style. |
rotation
|
Number | bubble rotation (in degrees). |
radius
|
Number | bubble radius (in pixels). |
Scatter chart
Scatter chart displays the dataset as a series of points with z and y coordinates.
The scatter chart supports the same properties as the line chart.
Plugin Legend
| Name | Type | Default | Description |
|---|---|---|---|
display
|
Boolean | true | showing legend |
position
|
String | 'top' | Position of the legend. |
fullWidth
|
Boolean | true | Marks that this box should take the full width of the canvas (pushing down other boxes). This is unlikely to need to be changed in day-to-day use. |
onClick
|
Function |
A callback that is called when a click event is registered on a label item |
|
onHover
|
Function |
A callback that is called when a 'mousemove' event is registered on top of a label item |
|
reverse
|
Boolean | false |
Legend will show datasets in reverse order. |
labels
|
Object |
See documentation about labels in table below. |
Plugin Legend - Label Configuration
| Name | Type | Default | Description |
|---|---|---|---|
boxWidth
|
Number | 40 | width of coloured box |
font.size
|
Number | 12 | font size of text |
font.style
|
String | 'normal' | font style of text |
color
|
Color | '#666' |
Color of text |
font.family
|
String | "Roboto" |
Font family of legend text. |
padding
|
Number | 10 |
Padding between rows of colored boxes. . |
generateLabels
|
Function |
Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. |
|
filter
|
Function | null |
Filters legend items out of the legend. Receives 2 parameters, a Legend Item and the chart data. |
usePointStyle
|
Boolean | false |
Label style will match corresponding point style (size is based on fontSize, boxWidth is not used in this case). |
backgroundColor
|
Style/Null | Null |
Background color of datalabels. . |
Methods
| Name | Description | Example |
|---|---|---|
update(data, config)
|
Updates chart's data and calls
.update(mode?)
method. In this method passing data is required, second argument is optional.
|
myChart.update(data, config)
|
dispose
|
Removes a mdb.Chart instance |
myChart.dispose()
|
getInstance
|
Static method which allows you to get the chart instance associated to a DOM element. |
Chart.getInstance(chartEl)
|
getOrCreateInstance
|
Static method which returns the chart instance associated to a DOM element or create a new one in case it wasn't initialized. |
Chart.getOrCreateInstance(chartEl)
|
const instance = new mdb.Chart(el, data, options);
instance.dispose();
Events
Event handling in Charts differs from other MDB components - in the
options parameter you can define which events should be triggered and handlers
for some of them (click, hover).
| Name | Type | Default | Description |
|---|---|---|---|
events
|
string[ ] |
['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove']
|
The events option defines the browser events
that the chart should listen to for tooltips and hovering.
|
onHover |
function | null |
Called when any of the events fire. Called in the context of the chart and passed the event and an array of active elements (bars, points, etc). |
onClick
|
function | null |
Called if the event is of type
'mouseup' or
'click'. Called in the context of the chart and
passed the event and an array of active elements.
|
const eventOption = {
options: {
// This chart will not respond to mousemove, etc
events: ['click']
}
};
Import
MDB UI KIT also works with module bundlers. Use the following code to import this component:
import { Chart } from 'mdb-ui-kit';