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 project. The examples below are using the apexcharts library, make sure to add it as CDN to your project.
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>Visualize your data in a simple way using the @material-tailwind/react chart plugin.
<div class="relative flex flex-col rounded-xl bg-white bg-clip-border text-gray-700 shadow-md">
<div class="relative mx-4 mt-4 flex flex-col gap-4 overflow-hidden rounded-none bg-transparent bg-clip-border text-gray-700 shadow-none md:flex-row md:items-center">
<div class="w-max rounded-lg bg-gray-900 p-5 text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
class="h-6 w-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0l-5.571 3-5.571-3"
></path>
</svg>
</div>
<div>
<h6 class="block font-sans text-base font-semibold leading-relaxed tracking-normal text-blue-gray-900 antialiased">
Line Chart
</h6>
<p class="block max-w-sm font-sans text-sm font-normal leading-normal text-gray-700 antialiased">
Visualize your data in a simple way using the
@material-tailwind/html chart plugin.
</p>
</div>
</div>
<div class="pt-6 px-2 pb-0">
<div id="line-chart"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
const chartConfig = {
series: [
{
name: "Sales",
data: [50, 40, 300, 320, 500, 350, 200, 230, 500],
},
],
chart: {
type: "line",
height: 240,
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",
},
};
const chart = new ApexCharts(document.querySelector("#chart"), chartConfig);
chart.render();
</script>Visualize your data in a simple way using the @material-tailwind/react chart plugin.
<div class="relative flex flex-col rounded-xl bg-white bg-clip-border text-gray-700 shadow-md">
<div class="relative mx-4 mt-4 flex flex-col gap-4 overflow-hidden rounded-none bg-transparent bg-clip-border text-gray-700 shadow-none md:flex-row md:items-center">
<div class="w-max rounded-lg bg-gray-900 p-5 text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
class="h-6 w-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0l-5.571 3-5.571-3"
></path>
</svg>
</div>
<div>
<h6 class="block font-sans text-base font-semibold leading-relaxed tracking-normal text-blue-gray-900 antialiased">
Line Chart
</h6>
<p class="block max-w-sm font-sans text-sm font-normal leading-normal text-gray-700 antialiased">
Visualize your data in a simple way using the
@material-tailwind/html chart plugin.
</p>
</div>
</div>
<div class="pt-6 px-2 pb-0">
<div id="bar-chart"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
const chartConfig = {
series: [
{
name: "Sales",
data: [50, 40, 300, 320, 500, 350, 200, 230, 500],
},
],
chart: {
type: "bar",
height: 240,
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",
},
};
const chart = new ApexCharts(document.querySelector("#bar-chart"), chartConfig);
chart.render();
</script>Visualize your data in a simple way using the @material-tailwind/react chart plugin.
<div class="relative flex flex-col rounded-xl bg-white bg-clip-border text-gray-700 shadow-md">
<div class="relative mx-4 mt-4 flex flex-col gap-4 overflow-hidden rounded-none bg-transparent bg-clip-border text-gray-700 shadow-none md:flex-row md:items-center">
<div class="w-max rounded-lg bg-gray-900 p-5 text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
class="h-6 w-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0l-5.571 3-5.571-3"
></path>
</svg>
</div>
<div>
<h6 class="block font-sans text-base font-semibold leading-relaxed tracking-normal text-blue-gray-900 antialiased">
Pie Chart
</h6>
<p class="block max-w-sm font-sans text-sm font-normal leading-normal text-gray-700 antialiased">
Visualize your data in a simple way using the
@material-tailwind/html chart plugin.
</p>
</div>
</div>
<div class="py-6 mt-4 grid place-items-center px-2">
<div id="pie-chart"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
const chartConfig = {
series: [44, 55, 13, 43, 22],
chart: {
type: "pie",
width: 280,
height: 280,
toolbar: {
show: false,
},
},
title: {
show: "",
},
dataLabels: {
enabled: false,
},
colors: ["#020617", "#ff8f00", "#00897b", "#1e88e5", "#d81b60"],
legend: {
show: false,
},
};
const chart = new ApexCharts(document.querySelector("#pie-chart"), chartConfig);
chart.render();
</script>Check out more chart examples from Material Tailwind Blocks: