Bar chart
A bar chart provides a way of showing data values represented as bars.
Loading...
import React from "react";
import { TEChart } from "tw-elements-react";
export default function ChartBar(): JSX.Element {
return (
<TEChart
type="bar"
data={{
labels: [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday",
],
datasets: [
{
label: "Traffic",
data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
},
],
}}
/>
);
}
Line chart
To use our minimalistic line chart, set the type option
to line.
Loading...
import React from "react";
import { TEChart } from "tw-elements-react";
export default function ChartLine(): JSX.Element {
return (
<TEChart
type="line"
data={{
labels: [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday",
],
datasets: [
{
label: "Traffic",
data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
},
],
}}
/>
);
}
Bar chart horizontal
Change the orientation of your bar chart from vertical to horizontal
by setting the indexAxis option to 'y'.
Loading...
import React from "react";
import { TEChart } from "tw-elements-react";
export default function ChartBarHorizontal(): JSX.Element {
return (
<TEChart
type="bar"
data={{
labels: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
],
datasets: [
{
label: "Traffic",
data: [30, 15, 62, 65, 61, 65, 40],
},
],
}}
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)",
},
},
},
}}
darkOptions={{
indexAxis: "y",
scales: {
x: {
stacked: true,
grid: {
display: true,
color: "#555",
borderDash: [2],
zeroLineColor: "rgba(0,0,0,0)",
zeroLineBorderDash: [2],
zeroLineBorderDashOffset: [2],
},
ticks: {
color: "#fff",
},
},
y: {
stacked: true,
grid: {
display: false,
},
ticks: {
color: "#fff",
},
},
},
}}
/>
);
}
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.
Loading...
import React from "react";
import { TEChart } from "tw-elements-react";
export default function ChartPie(): JSX.Element {
return (
<TEChart
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)",
],
},
],
}}
/>
);
}
Doughnut chart
Another type of graph representing data as an area's percentage is a doughnut chart.
Loading...
import React from "react";
import { TEChart } from "tw-elements-react";
export default function ChartDoughnut(): JSX.Element {
return (
<TEChart
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)",
],
},
],
}}
/>
);
}
Polar chart
Polar area graph will split the circle into pieces with equal angles and different radius.
Loading...
import React from "react";
import { TEChart } from "tw-elements-react";
export default function ChartPolar(): JSX.Element {
return (
<TEChart
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)",
],
},
],
}}
/>
);
}
Radar chart
This type of chart will enclose the area based on a dataset's values.
Loading...
import React from "react";
import { TEChart } from "tw-elements-react";
export default function ChartRadar(): JSX.Element {
return (
<TEChart
type="radar"
data={{
labels: [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday ",
],
datasets: [
{
label: "Traffic",
data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
},
],
}}
/>
);
}
Bubble chart
This graph visualizes data in a series of "bubbles" with customized coordinates and radius.
Loading...
import React from "react";
import { TEChart } from "tw-elements-react";
export default function ChartBubble(): JSX.Element {
return (
<TEChart
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)",
},
],
}}
/>
);
}
Scatter chart
Use this chart to represent your data as a series of points with x and y coordinates.
Loading...
import React from "react";
import { TEChart } from "tw-elements-react";
export default function ChartScatter(): JSX.Element {
return (
<TEChart
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,
},
],
},
],
}}
options={{
plugins: {
title: {
display: true,
text: "Scatter Chart - Logarithmic X-Axis",
},
},
scales: {
x: {
type: "logarithmic",
position: "bottom",
scaleLabel: {
labelString: "Frequency",
display: true,
},
},
y: {
type: "linear",
scaleLabel: {
labelString: "Voltage",
display: true,
},
},
},
}}
darkOptions={{
plugins: {
title: {
display: true,
text: "Scatter Chart - Logarithmic X-Axis",
color: "#fff",
},
legend: {
labels: {
color: "#fff",
},
},
},
scales: {
x: {
type: "logarithmic",
position: "bottom",
scaleLabel: {
labelString: "Frequency",
display: true,
},
ticks: {
color: "#fff",
},
grid: {
color: "#555",
},
},
y: {
type: "linear",
scaleLabel: {
labelString: "Voltage",
display: true,
},
ticks: {
color: "#fff",
},
grid: {
color: "#555",
},
},
},
}}
/>
);
}
Bar chart with custom options
TE React provides default options for each chart - you can easily
change that by passing an object to options property.
Loading...
import React from "react";
import { TEChart } from "tw-elements-react";
export default function ChartBarCustomOptions(): JSX.Element {
return (
<TEChart
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,
},
],
}}
options={{
plugins: {
legend: {
position: "top",
labels: {
color: "green",
},
},
},
scales: {
x: {
ticks: {
color: "#4285F4",
},
},
y: {
ticks: {
color: "#f44242",
},
},
},
}}
/>
);
}
Bar chart with custom tooltip
Set custom text format inside a tooltip by using plugins
option.
Loading...