Bar chart
const dataBar = {
type: "bar",
data: {
labels: ["Monday", "Tuesday", "Wednesday", "Thursday"],
datasets: [
{
label: "Traffic",
data: [3234, 2234, 3234, 1234],
backgroundColor: [
"rgba(66, 133, 244, 0.6)",
"rgba(66, 133, 244, 0.6)",
"rgba(66, 133, 244, 0.6)",
"rgba(66, 133, 244, 0.6)",
],
},
],
},
};
new mdb.Chart(document.getElementById("chart-bar"), dataBar);
<canvas id="chart-bar"></canvas>
Dataset
Options
Line chart
const dataLine = {
type: "line",
data: {
labels: ["Monday", "Tuesday", "Wednesday", "Thursday"],
datasets: [
{
label: "Traffic",
data: [3234, 2234, 3234, 1234],
borderColor: "#4285F4",
backgroundColor: "#4285F4",
fill: false,
},
],
},
};
new mdb.Chart(document.getElementById("chart-line"), dataLine);
<canvas id="chart-line"></canvas>
Dataset
Pie chart
const dataPie = {
type: "pie",
data: {
labels: ["Monday", "Tuesday", "Wednesday", "Thursday"],
datasets: [
{
label: "Traffic",
data: [3234, 2234, 3234, 1234],
backgroundColor: [
"rgba(117, 169, 255, 0.6)",
"rgba(148, 223, 215, 0.6)",
"rgba(208, 129, 222, 0.6)",
"rgba(247, 127, 167, 0.6)",
],
},
],
},
};
new mdb.Chart(document.getElementById("chart-pie"), dataPie);
<canvas id="chart-pie"></canvas>