Bar chart
You can initialize simple charts with data-twe-attributes
- it
doesn't require any additional JS code.
Via data-twe-attributes:
<div class="mx-auto w-11/12 overflow-hidden md:w-3/5">
<canvas
data-twe-chart="bar"
data-twe-dataset-label="Traffic"
data-twe-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
data-twe-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]">
</canvas>
</div>
// Initialization for ES Users
import {
Chart,
initTWE,
} from "tw-elements/js/chart.es.min.js";
initTWE({ Chart });
The same effect achieved via Javascript initialization:
<div class="mx-auto w-11/12 overflow-hidden md:w-3/5">
<canvas id="bar-chart"></canvas>
</div>
import { Chart } from "tw-elements/js/chart.es.min.js";
// 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 Chart(document.getElementById('bar-chart'), dataBar);
// 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 twe.Chart(document.getElementById('bar-chart'), dataBar);
Need even more robust tables? Try Data Den.
- Quick customization & hyper-focus on data management
- Easily integrate it with any project (not only MDB)
- Column Pinning, Drag&Drop Columns, Advanced Filtering & much more
For enterprise projects & users seeking advanced data controls. Tailor your data your way.
Line chart
To use our minimalistic line chart, set the type
option to
line
.
Via data-twe-attributes:
<div class="mx-auto w-11/12 overflow-hidden md:w-3/5">
<canvas
data-twe-chart="line"
data-twe-dataset-label="Traffic"
data-twe-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
data-twe-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]">
</canvas>
</div>
// Initialization for ES Users
import {
Chart,
initTWE,
} from "tw-elements/js/chart.es.min.js";
initTWE({ Chart });
The same effect achieved via Javascript initialization:
<div class="mx-auto w-11/12 overflow-hidden md:w-3/5">
<canvas id="line-chart"></canvas>
</div>
import { Chart } from "tw-elements/js/chart.es.min.js";
// 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 Chart(document.getElementById('line-chart'), dataLine);
// 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 twe.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'
.
<div class="mx-auto w-11/12 overflow-hidden md:w-3/5">
<canvas id="bar-chart-horizontal"></canvas>
</div>
import { Chart } from "tw-elements/js/chart.es.min.js";
// 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 Chart(
document.getElementById("bar-chart-horizontal"),
dataBarHorizontal,
optionsBarHorizontal
);
// 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 twe.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-twe-attributes:
<div class="mx-auto w-11/12 overflow-hidden md:w-3/5">
<canvas
data-twe-chart="pie"
data-twe-dataset-label="Traffic"
data-twe-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
data-twe-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]"
data-twe-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>
</div>
// Initialization for ES Users
import {
Chart,
initTWE,
} from "tw-elements/js/chart.es.min.js";
initTWE({ Chart });
The same effect achieved via Javascript initialization:
<div class="mx-auto w-11/12 overflow-hidden md:w-3/5">
<canvas id="pie-chart"></canvas>
</div>
import { Chart } from "tw-elements/js/chart.es.min.js";
// 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 Chart(document.getElementById('pie-chart'), dataPie);
// 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 twe.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-twe-attributes:
<div class="mx-auto w-11/12 overflow-hidden md:w-3/5">
<canvas
data-twe-chart="doughnut"
data-twe-dataset-label="Traffic"
data-twe-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
data-twe-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]"
data-twe-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>
</div>
// Initialization for ES Users
import {
Chart,
initTWE,
} from "tw-elements/js/chart.es.min.js";
initTWE({ Chart });
The same effect achieved via Javascript initialization:
<div class="mx-auto w-11/12 overflow-hidden md:w-3/5">
<canvas id="doughnut-chart"></canvas>
</div>
import { Chart } from "tw-elements/js/chart.es.min.js";
// 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 Chart(document.getElementById('doughnut-chart'), dataDoughnut);
// 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 twe.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-twe-attributes:
<div class="mx-auto w-11/12 overflow-hidden md:w-3/5">
<canvas
data-twe-chart="polarArea"
data-twe-dataset-label="Traffic"
data-twe-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
data-twe-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]"
data-twe-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>
</div>
// Initialization for ES Users
import {
Chart,
initTWE,
} from "tw-elements/js/chart.es.min.js";
initTWE({ Chart });
The same effect achieved via Javascript initialization:
<div class="mx-auto w-11/12 overflow-hidden md:w-3/5">
<canvas id="polar-area-chart"></canvas>
</div>
import { Chart } from "tw-elements/js/chart.es.min.js";
// 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 Chart(document.getElementById('polar-area-chart'), dataPolar);
// 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 twe.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-twe-attributes:
<div class="mx-auto w-11/12 overflow-hidden md:w-3/5">
<canvas
data-twe-chart="radar"
data-twe-dataset-label="Traffic"
data-twe-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
data-twe-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]">
</canvas>
</div>
// Initialization for ES Users
import {
Chart,
initTWE,
} from "tw-elements/js/chart.es.min.js";
initTWE({ Chart });
The same effect achieved via Javascript initialization:
<div class="mx-auto w-11/12 overflow-hidden md:w-3/5">
<canvas id="radar-chart"></canvas>
</div>
import { Chart } from "tw-elements/js/chart.es.min.js";
// 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 Chart(document.getElementById('radar-chart'), dataRadar);
// 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 twe.Chart(document.getElementById('radar-chart'), dataRadar);
Bubble chart
This graph visualizes data in a series of "bubbles" with customized coordinates and radius.
<div class="mx-auto w-11/12 overflow-hidden md:w-3/5">
<canvas id="bubble-chart"></canvas>
</div>
import { Chart } from "tw-elements/js/chart.es.min.js";
// Chart
const dataBubble = {
type: "bubble",
data: {
datasets: [
{
label: "John",
data: [
{
x: 3,
y: 7,
r: 10,
},
],
},
{
label: "Peter",
data: [
{
x: 5,
y: 7,
r: 10,
},
],
backgroundColor: "rgba(66, 133, 244, 0.2)",
},
{
label: "Donald",
data: [
{
x: 7,
y: 7,
r: 10,
},
],
backgroundColor: "rgba(66, 133, 244, 0.8)",
},
],
},
};
new Chart(document.getElementById("bubble-chart"), dataBubble);
// Chart
const dataBubble = {
type: "bubble",
data: {
datasets: [
{
label: "John",
data: [
{
x: 3,
y: 7,
r: 10,
},
],
},
{
label: "Peter",
data: [
{
x: 5,
y: 7,
r: 10,
},
],
backgroundColor: "rgba(66, 133, 244, 0.2)",
},
{
label: "Donald",
data: [
{
x: 7,
y: 7,
r: 10,
},
],
backgroundColor: "rgba(66, 133, 244, 0.8)",
},
],
},
};
new twe.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.
<div class="mx-auto w-11/12 overflow-hidden md:w-3/5">
<canvas id="scatter-chart"></canvas>
</div>
import { Chart } from "tw-elements/js/chart.es.min.js";
// 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: {
plugins: {
title: {
display: true,
text: "Scatter Chart - Logarithmic X-Axis",
color: "rgb(102,102,102)",
},
},
scales: {
x: {
type: "logarithmic",
position: "bottom",
scaleLabel: {
labelString: "Frequency",
display: true,
},
},
y: {
type: "linear",
scaleLabel: {
labelString: "Voltage",
display: true,
},
},
},
},
};
const optionsScatterDark = {
options: {
plugins: {
title: {
color: "#fff",
},
legend: {
labels: {
color: "#fff",
},
},
},
scales: {
x: {
ticks: {
color: "#fff",
},
grid: {
color: "#555",
},
},
y: {
ticks: {
color: "#fff",
},
grid: {
color: "#555",
},
},
},
},
};
new Chart(
document.getElementById("scatter-chart"),
dataScatter,
optionsScatter,
optionsScatterDark
);
// 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: {
plugins: {
title: {
display: true,
text: "Scatter Chart - Logarithmic X-Axis",
color: "rgb(102,102,102)",
},
},
scales: {
x: {
type: "logarithmic",
position: "bottom",
scaleLabel: {
labelString: "Frequency",
display: true,
},
},
y: {
type: "linear",
scaleLabel: {
labelString: "Voltage",
display: true,
},
},
},
},
};
const optionsScatterDark = {
options: {
plugins: {
title: {
color: "#fff",
},
legend: {
labels: {
color: "#fff",
},
},
},
scales: {
x: {
ticks: {
color: "#fff",
},
grid: {
color: "#555",
},
},
y: {
ticks: {
color: "#fff",
},
grid: {
color: "#555",
},
},
},
},
};
new twe.Chart(
document.getElementById("scatter-chart"),
dataScatter,
optionsScatter,
optionsScatterDark
);
Bar chart with custom options
TE provides default options for each chart - you can easily change that by passing an object with your custom options to the Chart constructor.
<div class="mx-auto w-11/12 overflow-hidden md:w-3/5">
<canvas id="bar-chart-custom-options"></canvas>
</div>
import { Chart } from "tw-elements/js/chart.es.min.js";
const dataBarCustomOptions = {
type: "bar",
data: {
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 optionsBarCustomOptions = {
options: {
plugins: {
legend: {
position: "top",
labels: {
color: "green",
},
},
},
scales: {
x: {
ticks: {
color: "#4285F4",
},
},
y: {
ticks: {
color: "#f44242",
},
},
},
},
};
new Chart(
document.getElementById("bar-chart-custom-options"),
dataBarCustomOptions,
optionsBarCustomOptions
);
const dataBarCustomOptions = {
type: "bar",
data: {
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 optionsBarCustomOptions = {
options: {
plugins: {
legend: {
position: "top",
labels: {
color: "green",
},
},
},
scales: {
x: {
ticks: {
color: "#4285F4",
},
},
y: {
ticks: {
color: "#f44242",
},
},
},
},
};
new twe.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.
<div class="mx-auto w-11/12 overflow-hidden md:w-3/5">
<canvas id="bar-chart-custom-tooltip"></canvas>
</div>
import { Chart } from "tw-elements/js/chart.es.min.js";
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 Chart(
document.getElementById("bar-chart-custom-tooltip"),
dataBarCustomTooltip,
optionsBarCustomTooltip
);
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 twe.Chart(
document.getElementById("bar-chart-custom-tooltip"),
dataBarCustomTooltip,
optionsBarCustomTooltip
);
Bar chart with darkmode customization
You can change some of the dark mode colors with data data-twe-attributes.
Use some of the attributes bellow to change charts dark mode
-
data-twe-dark-ticks-color
- change darkmode ticks color from white to other (string) -
data-twe-dark-label-color
- change darkmode label color from white to other (string) -
data-twe-dark-grid-lines-color
- change darkmode grid lines color from#555
to other (string) -
data-twe-dark-bg-color
- change darkmode background color from#262626
to the one you are using (string). Use with radial charts. -
data-twe-darkmode-off
- removes darkmode color change -
data-twe-dark-mode
- allows to change the dark mode on init
<div class="mx-auto w-11/12 overflow-hidden md:w-3/5">
<canvas
data-twe-chart="bar"
data-twe-dataset-label="Traffic"
data-twe-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
data-twe-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]"
data-twe-dark-ticks-color="#ff0000"
data-twe-dark-grid-lines-color="#ffff00"
data-twe-dark-label-color="#ff00ff">
</canvas>
</div>
// Initialization for ES Users
import {
Chart,
initTWE,
} from "tw-elements/js/chart.es.min.js";
initTWE({ Chart });
Bar chart with darkmode customization (with JS)
You can also change the darkmode appearance with JavaScript
<div class="mx-auto w-11/12 overflow-hidden md:w-3/5">
<canvas id="darkmode-customization"> </canvas>
</div>
import { Chart } from "tw-elements/js/chart.es.min.js";
const dataBarDarkMode = {
type: "bar",
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "Traffic",
data: [30, 15, 62, 65, 61, 65, 40],
},
],
},
};
const optionsDarkMode = {
options: {
scales: {
y: {
ticks: {
color: "rgb(100,50,200)",
},
grid: {
display: false,
},
},
x: {
ticks: {
color: "yellow",
},
},
},
plugins: {
legend: {
labels: {
color: "green",
},
},
},
}
};
new Chart(
document.getElementById("darkmode-customization"),
dataBarDarkMode,
{},
optionsDarkMode
);
const dataBarDarkMode = {
type: "bar",
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "Traffic",
data: [30, 15, 62, 65, 61, 65, 40],
},
],
},
};
const optionsDarkMode = {
options: {
scales: {
y: {
ticks: {
color: "rgb(100,50,200)",
},
grid: {
display: false,
},
},
x: {
ticks: {
color: "yellow",
},
},
},
plugins: {
legend: {
labels: {
color: "green",
},
},
},
}
};
new twe.Chart(
document.getElementById("darkmode-customization"),
dataBarDarkMode,
{},
optionsDarkMode
);