| title | description | navigation | github | prev | |||
|---|---|---|---|---|---|---|---|
Tailwind CSS Charts for React - Material Tailwind |
Customise your web projects with our easy-to-use chart examples for Tailwind CSS and React using Material Design guidelines. |
|
plugins/charts |
algolia-search |
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-apexcharts<CodePreview component={<Plugins.LineChart />}>
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>
);
}## Tailwind CSS Bar Chart - React
<CodePreview component={<Plugins.BarChart />}>
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>
);
}## Tailwind CSS Pie Chart - React
<CodePreview component={<Plugins.PieChart />}>
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>
);
}