Use our Tailwind CSS Chart examples to add charts for visualizing data in your web projects.
See below our beautiful Chart examples that you can use in your Tailwind CSS and React project. The examples below are using the apexcharts and react-apexcharts libraries, make sure to install them before using the example.
npm i apexcharts react-apexchartsVisualize your data in a simple way using the @material-tailwind/react chart plugin.
import {
Card,
CardBody,
CardHeader,
Typography,
} from "@material-tailwind/react";
import Chart from "react-apexcharts";
import { Square3Stack3DIcon } from "@heroicons/react/24/outline";
// If you're using Next.js please use the dynamic import for react-apexcharts and remove the import from the top for the react-apexcharts
// import dynamic from "next/dynamic";
// const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
const chartConfig = {
type: "line",
height: 240,
series: [
{
name: "Sales",
data: [50, 40, 300, 320, 500, 350, 200, 230, 500],
},
],
options: {
chart: {
toolbar: {
show: false,
},
},
title: {
show: "",
},
dataLabels: {
enabled: false,
},
colors: ["#020617"],
stroke: {
lineCap: "round",
curve: "smooth",
},
markers: {
size: 0,
},
xaxis: {
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
labels: {
style: {
colors: "#616161",
fontSize: "12px",
fontFamily: "inherit",
fontWeight: 400,
},
},
categories: [
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
},
yaxis: {
labels: {
style: {
colors: "#616161",
fontSize: "12px",
fontFamily: "inherit",
fontWeight: 400,
},
},
},
grid: {
show: true,
borderColor: "#dddddd",
strokeDashArray: 5,
xaxis: {
lines: {
show: true,
},
},
padding: {
top: 5,
right: 20,
},
},
fill: {
opacity: 0.8,
},
tooltip: {
theme: "dark",
},
},
};
export default function Example() {
return (
<Card>
<CardHeader
floated={false}
shadow={false}
color="transparent"
className="flex flex-col gap-4 rounded-none md:flex-row md:items-center"
>
<div className="w-max rounded-lg bg-gray-900 p-5 text-white">
<Square3Stack3DIcon className="h-6 w-6" />
</div>
<div>
<Typography variant="h6" color="blue-gray">
Line Chart
</Typography>
<Typography
variant="small"
color="gray"
className="max-w-sm font-normal"
>
Visualize your data in a simple way using the
@material-tailwind/react chart plugin.
</Typography>
</div>
</CardHeader>
<CardBody className="px-2 pb-0">
<Chart {...chartConfig} />
</CardBody>
</Card>
);
}Visualize your data in a simple way using the @material-tailwind/react chart plugin.
import {
Card,
CardBody,
CardHeader,
Typography,
} from "@material-tailwind/react";
import Chart from "react-apexcharts";
import { Square3Stack3DIcon } from "@heroicons/react/24/outline";
// If you're using Next.js please use the dynamic import for react-apexcharts and remove the import from the top for the react-apexcharts
// import dynamic from "next/dynamic";
// const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
const chartConfig = {
type: "bar",
height: 240,
series: [
{
name: "Sales",
data: [50, 40, 300, 320, 500, 350, 200, 230, 500],
},
],
options: {
chart: {
toolbar: {
show: false,
},
},
title: {
show: "",
},
dataLabels: {
enabled: false,
},
colors: ["#020617"],
plotOptions: {
bar: {
columnWidth: "40%",
borderRadius: 2,
},
},
xaxis: {
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
labels: {
style: {
colors: "#616161",
fontSize: "12px",
fontFamily: "inherit",
fontWeight: 400,
},
},
categories: [
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
},
yaxis: {
labels: {
style: {
colors: "#616161",
fontSize: "12px",
fontFamily: "inherit",
fontWeight: 400,
},
},
},
grid: {
show: true,
borderColor: "#dddddd",
strokeDashArray: 5,
xaxis: {
lines: {
show: true,
},
},
padding: {
top: 5,
right: 20,
},
},
fill: {
opacity: 0.8,
},
tooltip: {
theme: "dark",
},
},
};
export default function Example() {
return (
<Card>
<CardHeader
floated={false}
shadow={false}
color="transparent"
className="flex flex-col gap-4 rounded-none md:flex-row md:items-center"
>
<div className="w-max rounded-lg bg-gray-900 p-5 text-white">
<Square3Stack3DIcon className="h-6 w-6" />
</div>
<div>
<Typography variant="h6" color="blue-gray">
Bar Chart
</Typography>
<Typography
variant="small"
color="gray"
className="max-w-sm font-normal"
>
Visualize your data in a simple way using the
@material-tailwind/react chart plugin.
</Typography>
</div>
</CardHeader>
<CardBody className="px-2 pb-0">
<Chart {...chartConfig} />
</CardBody>
</Card>
);
}Visualize your data in a simple way using the @material-tailwind/react chart plugin.
import {
Card,
CardBody,
CardHeader,
Typography,
} from "@material-tailwind/react";
import Chart from "react-apexcharts";
import { Square3Stack3DIcon } from "@heroicons/react/24/outline";
// If you're using Next.js please use the dynamic import for react-apexcharts and remove the import from the top for the react-apexcharts
// import dynamic from "next/dynamic";
// const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
const chartConfig = {
type: "pie",
width: 280,
height: 280,
series: [44, 55, 13, 43, 22],
options: {
chart: {
toolbar: {
show: false,
},
},
title: {
show: "",
},
dataLabels: {
enabled: false,
},
colors: ["#020617", "#ff8f00", "#00897b", "#1e88e5", "#d81b60"],
legend: {
show: false,
},
},
};
export default function Example() {
return (
<Card>
<CardHeader
floated={false}
shadow={false}
color="transparent"
className="flex flex-col gap-4 rounded-none md:flex-row md:items-center"
>
<div className="w-max rounded-lg bg-gray-900 p-5 text-white">
<Square3Stack3DIcon className="h-6 w-6" />
</div>
<div>
<Typography variant="h6" color="blue-gray">
Pie Chart
</Typography>
<Typography
variant="small"
color="gray"
className="max-w-sm font-normal"
>
Visualize your data in a simple way using the
@material-tailwind/react chart plugin.
</Typography>
</div>
</CardHeader>
<CardBody className="mt-4 grid place-items-center px-2">
<Chart {...chartConfig} />
</CardBody>
</Card>
);
}Check out more chart examples from Material Tailwind Blocks: