Charts
Vue 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
MDBChart and passing type, data and
options properties.
<template>
<MDBChart type="bar" :data="barChartData" />
</template>
<script>
import { MDBChart } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBChart
},
setup() {
const barChartData = ref({
labels: [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday"
],
datasets: [
{
label: "Traffic",
data: [2112, 2343, 2545, 3423, 2365, 1985, 987]
}
]
});
return {
barChartData
};
}
};
</script>
<script setup lang="ts">
import { MDBChart } from "mdb-vue-ui-kit";
import { ref } from "vue";
const barChartData = ref({
labels: [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday"
],
datasets: [
{
label: "Traffic",
data: [2112, 2343, 2545, 3423, 2365, 1985, 987]
}
]
});
</script>
Line chart
To use our minimalistic line chart, set the type property to line.
<template>
<MDBChart type="line" :data="lineChartData" />
</template>
<script>
import { MDBChart } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBChart
},
setup() {
const lineChartData = ref({
labels: [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday"
],
datasets: [
{
label: "Traffic",
data: [2112, 2343, 2545, 3423, 2365, 1985, 987]
}
]
});
return {
lineChartData
};
}
};
</script>
<script setup lang="ts">
import { MDBChart } from "mdb-vue-ui-kit";
import { ref } from "vue";
const lineChartData = ref({
labels: [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday"
],
datasets: [
{
label: "Traffic",
data: [2112, 2343, 2545, 3423, 2365, 1985, 987]
}
]
});
</script>
Bar chart horizontal
Change the orientation of your bar chart from vertical to horizontal by adding the
indexAxis="y" and proper chart styling options.
<template>
<MDBChart
type="bar"
:data="horizontalBarChartData"
:options="horizontalBarChartOptions"
/>
</template>
<script>
import { MDBChart } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBChart
},
setup() {
const horizontalBarChartData = ref({
labels: [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday"
],
datasets: [
{
label: "Traffic",
data: [2112, 2343, 2545, 3423, 2365, 1985, 987]
}
]
});
const horizontalBarChartOptions = ref({
indexAxis: "y",
scales: {
x: {
stacked: true,
grid: {
display: true,
drawBorder: true
},
ticks: {
color: "rgba(0,0,0, 0.5)"
}
},
y: {
stacked: true,
grid: {
display: false,
drawBorder: false
},
ticks: {
color: "rgba(0,0,0, 0.5)"
}
}
}
});
return {
horizontalBarChartData,
horizontalBarChartOptions
};
}
};
</script>
<script setup lang="ts">
import { MDBChart } from "mdb-vue-ui-kit";
import { ref } from "vue";
const horizontalBarChartData = ref({
labels: [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday"
],
datasets: [
{
label: "Traffic",
data: [2112, 2343, 2545, 3423, 2365, 1985, 987]
}
]
});
const horizontalBarChartOptions = ref({
indexAxis: "y",
scales: {
x: {
stacked: true,
grid: {
display: true,
drawBorder: true
},
ticks: {
color: "rgba(0,0,0, 0.5)"
}
},
y: {
stacked: true,
grid: {
display: false,
drawBorder: false
},
ticks: {
color: "rgba(0,0,0, 0.5)"
}
}
}
});
</script>
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.
<template>
<MDBChart type="pie" :data="pieChartData" />
</template>
<script>
import { MDBChart } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBChart
},
setup() {
const pieChartData = ref({
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)',
],
},
],
});
return {
pieChartData
};
}
};
</script>
<script setup lang="ts">
import { MDBChart } from "mdb-vue-ui-kit";
import { ref } from "vue";
const pieChartData = ref({
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)',
],
},
],
});
</script>
Doughnut chart
Another type of graph representing data as an area's percentage is a doughnut chart.
<template>
<MDBChart type="doughnut" :data="doughnutChartData" />
</template>
<script>
import { MDBChart } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBChart
},
setup() {
const doughnutChartData = ref({
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)',
],
},
],
});
return {
doughnutChartData
};
}
};
</script>
<script setup lang="ts">
import { MDBChart } from "mdb-vue-ui-kit";
import { ref } from "vue";
const doughnutChartData = ref({
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)',
],
},
],
});
</script>
Polar chart
Polar area graph will split the circle into pieces with equal angles and different radius.
<template>
<MDBChart type="polarArea" :data="polarAreaChartData" />
</template>
<script>
import { MDBChart } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBChart
},
setup() {
const polarAreaChartData = ref({
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)',
],
},
],
});
return {
polarAreaChartData
};
}
};
</script>
<script setup lang="ts">
import { MDBChart } from "mdb-vue-ui-kit";
import { ref } from "vue";
const polarAreaChartData = ref({
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)',
],
},
],
});
</script>
Radar chart
This type of chart will enclose the area based on a dataset's values.
<template>
<MDBChart type="radar" :data="radarChartData" />
</template>
<script>
import { MDBChart } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBChart
},
setup() {
const radarChartData = ref({
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)',
],
},
],
});
return {
radarChartData
};
}
};
</script>
<script setup lang="ts">
import { MDBChart } from "mdb-vue-ui-kit";
import { ref } from "vue";
const radarChartData = ref({
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)',
],
},
],
});
</script>
Bubble chart
This graph visualizes data in a series of "bubbles" with customized coordinates and radius.
<template>
<MDBChart type="bubble" :data="bubbleChartData" />
</template>
<script>
import { MDBChart } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBChart
},
setup() {
const bubbleChartData = ref({
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',
},
],
});
return {
bubbleChartData
};
}
};
</script>
<script setup lang="ts">
import { MDBChart } from "mdb-vue-ui-kit";
import { ref } from "vue";
const bubbleChartData = ref({
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',
},
],
});
</script>
Scatter chart
Use this chart to represent your data as a series of points with x and y coordinates.
<template>
<MDBChart
type="scatter"
:data="scatterChartData"
:options="scatterChartOptions"
/>
</template>
<script>
import { MDBChart } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBChart
},
setup() {
const scatterChartData = ref({
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 scatterChartOptions = ref({
plugins: {
title: {
display: true,
text: "Scatter Chart - Logarithmic X-Axis"
}
},
scales: {
x: {
type: "logarithmic",
position: "bottom",
ticks: {
callback: function(tick) {
let remain = tick / Math.pow(10, Math.floor(Math.log10(tick)));
if (remain === 1 || remain === 2 || remain === 5) {
return tick.toString() + "Hz";
}
return "";
}
},
title: {
text: "Frequency",
display: true
}
},
y: {
type: "linear",
ticks: {
callback: function(tick) {
return tick.toString() + "dB";
}
},
title: {
text: "Voltage",
display: true
}
}
}
});
return {
scatterChartData,
scatterChartOptions
};
}
};
</script>
<script setup lang="ts">
import { MDBChart } from "mdb-vue-ui-kit";
import { ref } from "vue";
const scatterChartData = ref({
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 scatterChartOptions = ref({
plugins: {
title: {
display: true,
text: "Scatter Chart - Logarithmic X-Axis"
}
},
scales: {
x: {
type: "logarithmic",
position: "bottom",
ticks: {
callback: function(tick) {
let remain = tick / Math.pow(10, Math.floor(Math.log10(tick)));
if (remain === 1 || remain === 2 || remain === 5) {
return tick.toString() + "Hz";
}
return "";
}
},
title: {
text: "Frequency",
display: true
}
},
y: {
type: "linear",
ticks: {
callback: function(tick: number) {
return tick.toString() + "dB";
}
},
title: {
text: "Voltage",
display: true
}
}
}
});
</script>
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 component
Note: Read API tab to learn more about available options.
<template>
<MDBChart
type="bar"
:data="customBarChartData"
:options="customBarChartOptions"
canvasClass="col-sm-12 col-md-10 col-xl-8 mb-4"
/>
</template>
<script>
import { MDBChart } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBChart
},
setup() {
const customBarChartData = ref({
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
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 customBarChartOptions = ref({
scales: {
x: {
ticks: {
color: "#4285F4"
}
},
y: {
ticks: {
color: "#f44242"
}
}
},
plugins: {
legend: {
labels: {
color: "green",
position: 'top',
},
},
},
});
return {
customBarChartData,
customBarChartOptions
};
}
};
</script>
<script setup lang="ts">
import { MDBChart } from "mdb-vue-ui-kit";
import { ref } from "vue";
const customBarChartData = ref({
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
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 customBarChartOptions = ref({
scales: {
x: {
ticks: {
color: "#4285F4"
}
},
y: {
ticks: {
color: "#f44242"
}
}
},
plugins: {
legend: {
labels: {
color: "green",
position: 'top',
},
},
},
});
</script>
Bar chart with custom tooltip
Set custom text format inside a tooltip by using plugins option.
<template>
<MDBChart
type="bar"
:data="dataBarCustomTooltip"
:options="optionsBarCustomTooltip"
canvasClass="col-sm-12 col-md-10 col-xl-8 mb-4"
/>
</template>
<script>
import { MDBChart } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBChart
},
setup() {
const dataBarCustomTooltip = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "Traffic",
data: [30, 15, 62, 65, 61, 65, 40],
},
],
};
const optionsBarCustomTooltip = {
plugins: {
tooltip: {
callbacks: {
label: function (context) {
let label = context.dataset.label || "";
label = `${label}: ${context.formattedValue} users`;
return label;
},
},
},
},
};
return {
dataBarCustomTooltip,
optionsBarCustomTooltip
};
}
};
</script>
<script setup lang="ts">
import { MDBChart } from "mdb-vue-ui-kit";
import { ref } from "vue";
const dataBarCustomTooltip = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "Traffic",
data: [30, 15, 62, 65, 61, 65, 40],
},
],
};
const optionsBarCustomTooltip = {
plugins: {
tooltip: {
callbacks: {
label: function (context) {
let label = context.dataset.label || "";
label = `${label}: ${context.formattedValue} users`;
return label;
},
},
},
},
};
</script>
Charts - API
Import
<script>
import {
MDBChart
} from 'mdb-vue-ui-kit';
</script>
Properties
| Name | Type | Default | Description |
|---|---|---|---|
data
|
Array | |
Chart dataset |
options
|
Array | |
Chart options array |
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. |
indexAxis
|
String |
The base axis of the dataset. 'x' for horizontal lines and
'y' for vertical lines.
|
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. |
clip
|
Number | Object | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0} |
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. |
order
|
Number | The drawing order of dataset. Also affects order for stacking, tooltip, and legend. |
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 |
stack
|
String | The ID of the group to which this dataset belongs to (when stacked, each group will be a separate stack). Defaults to 'line'. |
stepped
|
Boolean/String | If the line is shown as a stepped line. |
tension
|
Number | Bezier curve tension of the line. Set to 0 to draw straight lines. This option is ignored if monotone cubic interpolation is used. |
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. |
indexAxis
|
String |
The base axis of the dataset. 'x' for horizontal lines and
'y' for vertical lines.
|
base
|
Number | Base value for the bar in data units along the value axis. If not set, defaults to the value axis base value. |
backgroundColor
|
Color/Color[ ] | The fill color of the bar. |
barPercentage
|
Number/Number[ ] | Define percent of the available width each bar should take within its category width. |
borderColor
|
Color/Color[ ] | The color of the bar border. |
borderWidth
|
Number/Number[ ] | The stroke width of the bar in pixels. |
borderRadius
|
Number/Number[ ] | The border radius of the bar in pixels. |
borderSkipped
|
String | Which edge to skip drawing the border for. |
clip
|
Number | Object | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0} |
grouped
|
Boolean | Defines whether the bars should be grouped on index axis. When true, all the datasets at same index value will be placed next to each other centering on that index value. When false, each bar is placed on its actual index-axis value. |
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. |
hoverBorderRadius
|
Number/Number[ ] | The border radius of the bars when hovered. |
minBarLength
|
Number/Number[ ] | Sets minimum lenght of the bar in pixels. |
order
|
Number | The drawing order of dataset. Also affects order for stacking, tooltip, and legend. |
pointStyle
|
String | Image | Style of the point on the legend. Defaults to 'circle' |
skipNull
|
Boolean | If true, null or undefined values will not be used for spacing calculations when determining bar size. |
stack
|
String | The ID of the group to which this dataset belongs to (when stacked, each group will be a separate stack). Defaults to 'line'. |
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 |
clip
|
Number | Object | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0} |
fill
|
Boolean/String | How to fill the area under the line. |
order
|
Number | The drawing order of dataset. |
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. |
spanGaps
|
Boolean | If true, lines will be drawn between points with no or null data. If false, points with null data will create a break in the line |
tension
|
Number | Bezier curve tension of the line. Set to 0 to draw straightlines. |
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. |
borderAlign
|
String | When 'center' is set, the borders of arcs next to each other will overlap. When 'inner' is set, it is guaranteed that all borders will not overlap. |
borderColor
|
Color[ ] | The border color of the arcs in the dataset. |
borderRadius
|
Number/Number[ ] | The border radius of the arcs in pixels. |
borderWidth
|
Number[ ] | The border width of the arcs in the dataset. |
circumference
|
Number[ ] | Per-dataset override for the sweep that the arcs cover. |
clip
|
Number | Object | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0} |
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. |
hoverOffset
|
Number[ ] | The offset of the arcs when hovered. |
offset
|
Number[ ] | The offset of the arcs in pixels |
rotation
|
Number[ ] | Per-dataset override for the starting angle to draw arcs from |
weight
|
Number[ ] | The relative thickness of the dataset. |
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. |
borderAlign
|
String | When 'center' is set, the borders of arcs next to each other will overlap. When 'inner' is set, it is guaranteed that all the borders do not overlap. |
borderColor
|
Color | The border color of the arcs in the dataset. |
borderWidth
|
number | The border width of the arcs in the dataset. |
clip
|
Number | Object | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0} |
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) |
clip
|
Number | Object | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0} |
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.
Legend
| Name | Type | Default | Description |
|---|---|---|---|
display
|
Boolean | true | showing legend |
position
|
String | 'top' | Position of the legend. |
align
|
String | 'center' | Alignement position of the legend |
maxHeight
|
Number | Maximum height of the legend in pixels | |
maxWidth
|
Number | Maximum width of the legend in pixels | |
fullSize
|
Boolean | true | Marks that this box should take the full width'length 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 |
|
onLeave
|
Function |
A callback that is called when a 'mousemove' event is registered outside of a previously hovered label item. |
|
reverse
|
Boolean | false |
Legend will show datasets in reverse order. |
labels
|
Object |
See documentation about labels in table below. |
|
rtl
|
Boolean |
Set true for rendering the legends from right to left. |
|
textDirection
|
String |
This will force the text direction 'rtl' or 'ltr' on the canvas for rendering the legend, regardless of the css specified on the canvas |
|
title
|
Object |
See documentation about label's title |
Legend Label Configuration
| Name | Type | Default | Description |
|---|---|---|---|
boxWidth
|
Number | 40 | width of coloured box |
boxHeight
|
Number | font.size | Height of the coloured box |
color
|
Color | Color of label and the strikethrough. | |
font
|
Font | Takes all font related options: 'family', 'size', 'style', 'weight', 'lineHeight' | |
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. |
sort
|
Function | null |
Sorts legend items. Receives 3 parameters, two Legend Items and the chart data. |
pointStyle
|
If specified, this style of point is used for the legend. Only used if usePointStyle is true. |
||
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. . |
Legend Title Configuration
| Name | Type | Default | Description |
|---|---|---|---|
color
|
Color | Color of text | |
display
|
Boolean | false | Is the legend title displayed |
font
|
Font | Takes all font related options: 'family', 'size', 'style', 'weight', 'lineHeight' | |
padding
|
Padding | 0 |
Padding around the title. |
text
|
String |
The string title |
Animation
You can customize the chart's animation with the following options:
| Name | Type | Default | Description |
|---|---|---|---|
duration
|
Number | 1000 | The number of milliseconds an animation takes |
easing
|
String | easeOutQuart | Easing function to use. |
delay
|
Number | undefined | Delay before starting the animations. |
loop
|
Boolean | undefined |
If set to true, the animations loop endlessly. |
Easing
Available options:
lineareaseInQuadeaseOutQuadeaseInOutQuadeaseInCubiceaseOutCubiceaseInOutCubiceaseInQuarteaseOutQuarteaseInOutQuarteaseInQuinteaseOutQuinteaseInOutQuinteaseInSineeaseOutSineeaseInOutSineeaseInExpoeaseOutExpoeaseInOutExpoeaseInCirceaseOutCirceaseInOutCirceaseInElasticeaseOutElasticeaseInOutElasticeaseInBackeaseOutBackeaseInOutBackeaseInBounceeaseOutBounceeaseInOutBounce