Tailwind CSS React Charts

Bar chart

A bar chart provides a way of showing data values represented as bars.

  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], }, ], }} /> ); }

Hey there 👋 we're excited about TW Elements for React and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Line chart

To use our minimalistic line chart, set the type option to line.

  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'.

  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.

  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.

  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.

  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.

  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.

  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.

  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.

  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", }, }, }, }} /> ); }

Set custom text format inside a tooltip by using plugins option.

  import React from "react"; import { TEChart } from "tw-elements-react"; export default function ChartBarCustomTootlip(): 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={{ plugins: { tooltip: { callbacks: { label: function (context) { let label = context.dataset.label || ""; label = `${label}: ${context.formattedValue} users`; return label; }, }, }, }, }} darkOptions={{ plugins: { tooltip: { callbacks: { label: function (context) { let label = context.dataset.label || ""; label = `${label}: ${context.formattedValue} users`; return label; }, }, }, legend: { labels: { color: "#fff" }, }, }, }} /> ); }

Bar chart with darkmode customization

You can change some of the dark mode colors with the following props used in the example below.

  import React from "react"; import { TEChart } from "tw-elements-react"; export default function ChartBarDarkModeProps(): JSX.Element { return ( <TEChart type="bar" darkTicksColor="#ff0000" darkGridLinesColor="#ffff00" darkLabelColor="#ff00ff" data={{ labels: [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday", ], datasets: [ { label: "Traffic", data: [2112, 2343, 2545, 3423, 2365, 1985, 987], }, ], }} /> ); }

Bar chart dark mode customization (with darkOptions property)

You can change dark mode configuration using darkOptions property.

  import React from "react"; import { TEChart } from "tw-elements-react"; export default function ChartBarDarkModeOptions(): 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], }, ], }} darkOptions={{ scales: { y: { ticks: { color: "rgb(100,50,200)", }, grid: { display: false, }, }, x: { ticks: { color: "yellow", }, }, }, plugins: { legend: { labels: { color: "green", }, }, }, }} /> ); }

If you are looking for more advanced options, try Bootstrap Charts from MDBootstrap.

Import

Properties

TEChart

Name	Type	Default	Description
`chartRef`	React.Ref<HTMLCanvasElement> \| any	`-`	Color for ticks in dark mode
`darkBgColor`	String	`"#262626"`	Default background color charts in darkmode.
`darkGridLinesColor`	String	`"#555"`	Color for grid lines in dark mode.
`darkLabelColor`	String	`'#fff'`	Color for labels in dark mode.
`darkMode`	"dark" \| "light" \| null	`null`	Set the darkmode value on init. By default it's set to null, so the mode will depend on the localStorage and `.dark` class in HTML element.
`darkOptions`	Record<string, any> \| undefined	`undefined`	Chart options array in dark mode.
`darkTicksColor`	String	`"#fff"`	Color for ticks in dark mode.
`data`	ChartData	`-`	Data object for chart.
`datalabels`	Boolean	`false`	Defines visibility of labels.
`disableDarkMode`	Boolean \| undefined	`undefined`	Add only when you want to turn off darkmode. Simply add `disableDarkMode` prop.
`options`	Record<string, any> \| undefined	`undefined`	Chart options array in light mode.
`type`	String	`-`	Chart type. Available types: `bar`, `line`, `pie`, `doughnut`, `polarArea`, `radar`, `bubble`, `scatter`.

Options

Line options

The line chart allows specifying several properties for each dataset. Besides, some of them (f.e. all point* properties) can be defined as an array - this way the first value applies to the first point, the second to the second point, etc.

Name	Type	Description
`label`	String	The label for the dataset that appears in the legend and tooltips.
`xAxisID`	String	The ID of the x-axis to plot this dataset on. If not specified, this defaults to the ID of the first found x-axis
`yAxisID`	String	The ID of the y-axis to plot this dataset on. If not specified, this defaults to the ID of the first found y-axis.
`backgroundColor`	Color	The fill color under the line.
`borderColor`	Color	The color of the line.
`borderWidth`	Number	The width of the line in pixels.
`borderDash`	Number	The length and spacing of dashes.
`borderDashOffset`	Number	Offset for line dashes.
`borderCapStyle`	String	Cap style of the line.
`borderJoinStyle`	String	Line joint style.
`cubicInterpolationMode`	String	The algorithm used to interpolate a smooth curve from the discrete data points.
`fill`	Boolean/String	How to fill the area under the line.
`lineTension`	Number	Bezier curve tension of the line. Set to 0 to draw straight lines. This option is ignored if monotone cubic interpolation is used.
`pointBackgroundColor`	Color/Color[ ]	The fill color for points.
`pointBorderColor`	Color/Color[ ]	The border color for points.
`pointBorderWidth`	Number/Number[ ]	The width of the point border in pixels.
`pointRadius`	Number/Number[ ]	The radius of the point shape. If set to 0, the point is not rendered.
`pointStyle`	String/String[ ]/Image/Image[ ]	Style of the point.
`pointRotation`	Number/Number[ ]	The rotation of the point in degrees.
`pointHitRadius`	Number/Number[ ]	The pixel size of the non-displayed point that reacts to mouse events.
`pointHoverBackgroundColor`	Color/Color[ ]	Point background color when hovered.
`pointHoverBorderColor`	Color/Color[ ]	Point border color when hovered.
`pointHoverBorderWidth`	Number/Number[ ]	The border width of a point when hovered over.
`pointHoverRadius`	Number/Number[ ]	The radius of the point when hovered over.
`showLine`	Boolean	If false, the line is not drawn for this dataset.
`spanGaps`	Boolean	If true, lines will be drawn between points with no or null data. If false, points with NaN data will create a break in the line
`steppedLine`	Boolean/String	If the line is shown as a stepped line.

Bar options

The bar chart allows specifying several properties for each dataset. Besides, some of them can be defined as an array - this way the first value applies to the first bar, the second to the second bar, etc.

Name	Type	Description
`label`	String	The label for the dataset which appears in the legend and tooltips.
`xAxisID`	String	The ID of the x axis to plot this dataset on. If not specified, this defaults to the ID of the first found x axis
`yAxisID`	String	The ID of the y axis to plot this dataset on. If not specified, this defaults to the ID of the first found y axis.
`backgroundColor`	Color/Color[ ]	The fill color of the bar.
`borderColor`	Color/Color[ ]	The color of the bar border.
`borderWidth`	Number/Number[ ]	The stroke width of the bar in pixels.
`borderSkipped`	String	Which edge to skip drawing the border for.
`hoverBackgroundColor`	Color/Color[ ]	The fill colour of the bars when hovered.
`hoverBorderColor`	Color/Color[ ]	The stroke colour of the bars when hovered.
`hoverBorderWidth`	Number/Number[ ]	The stroke width of the bars when hovered.

Radar chart

The radar chart allows specifying several properties for each dataset. Besides, some of them (f.e. all point* properties) can be defined as an array - this way the first value applies to the first point, the second to the second point, etc.

Name	Type	Description
`label`	String	The label for the dataset which appears in the legend and tooltips.
`backgroundColor`	Color	The fill color under the line.
`borderColor`	Color	The color of the line.
`borderWidth`	Number	The width of the line in pixels.
`borderDash`	Number[ ]	Length and spacing of dashes.
`borderDashOffset`	Number	Offset for line dashes.
`borderCapStyle`	String	Cap style of the line
`borderJoinStyle`	String	Line joint style
`fill`	Boolean/String	How to fill the area under the line.
`lineTension`	Number	Bezier curve tension of the line. Set to 0 to draw straightlines.
`pointBackgroundColor`	Color/Color[ ]	The fill color for points.
`pointBorderColor`	Color/Color[ ]	The border color for points.
`pointBorderWidth`	Number/Number[ ]	The width of the point border in pixels.
`pointRadius`	Number/Number[ ]	The radius of the point shape. If set to 0, the point is not rendered.
`pointRotation`	Number/Number[ ]	The rotation of the point in degrees.
`pointStyle`	String/String[ ]/Image/Image[ ]	Style of the point.
`pointHitRadius`	Number/Number[ ]	The pixel size of the non-displayed point that reacts to mouse events.
`pointHoverBackgroundColor`	Color/Color[ ]	Point background color when hovered.
`pointHoverBorderColor`	Color/Color[ ]	Point border color when hovered.
`pointHoverBorderWidth`	Number/Number[ ]	Border width of point when hovered.
`pointHoverRadius`	Number/Number[ ]	The radius of the point when hovered.

Doughnut and Pie

In Doughnut and Pie charts passing an array of values to an option will apply each of them to a corresponding entry in a dataset.

Name	Type	Description
`backgroundColor`	Color[ ]	The fill color of the arcs in the dataset.
`borderColor`	Color[ ]	The border color of the arcs in the dataset.
`borderWidth`	Number[ ]	The border width of the arcs in the dataset.
`hoverBackgroundColor`	Color[ ]	The fill colour of the arcs when hovered.
`hoverBorderColor`	Color[ ]	The stroke colour of the arcs when hovered.
`hoverBorderWidth`	Number[ ]	The stroke width of the arcs when hovered.

Polar Area chart

Polar area charts are similar to pie charts, but each segment has the same angle and differs in the radius (depending on the value).

Name	Type	Description
`backgroundColor`	Color	The fill color of the arcs in the dataset.
`borderColor`	Color	The border color of the arcs in the dataset.
`borderWidth`	number	The border width of the arcs in the dataset.
`hoverBackgroundColor`	Color	The fill colour of the arcs when hovered.
`hoverBorderColor`	Color	The stroke colour of the arcs when hovered.
`hoverBorderWidth`	number	The stroke width of the arcs when hovered.

Bubble chart

A bubble chart displays a series of points with x and y coordinates. The z coordinate determines the size of each bubble.

Name	Type	Description
`backgroundColor`	Color	bubble background color
`borderColor`	Color	bubble border color
`borderWidth`	Number	bubble border width (in pixels)
`hoverBackgroundColor`	Color	bubble background color when hovered
`hoverBorderColor`	Color	bubble border color when hovered
`hoverBorderWidth`	Number	bubble border width when hovered (in pixels)
`hoverRadius`	Number	bubble additional radius when hovered (in pixels)
`hitRadius`	Number	bubble additional radius for hit detection (in pixels).
`label`	String	The label for the dataset which appears in the legend and tooltips.
`order`	Number	The drawing order of dataset.
`pointStyle`	String	bubble shape style.
`rotation`	Number	bubble rotation (in degrees).
`radius`	Number	bubble radius (in pixels).

Scatter chart

Scatter chart displays the dataset as a series of points with z and y coordinates.

Note: The scatter chart supports the same properties as the line chart.

Plugin Legend

Name	Type	Default	Description
`display`	Boolean	true	showing legend
`position`	String	'top'	Position of the legend.
`fullWidth`	Boolean	true	Marks that this box should take the full width of the canvas (pushing down other boxes). This is unlikely to need to be changed in day-to-day use.
`onClick`	Function		A callback that is called when a click event is registered on a label item
`onHover`	Function		A callback that is called when a 'mousemove' event is registered on top of a label item
`reverse`	Boolean	false	Legend will show datasets in reverse order.
`labels`	Object		See documentation about labels in table below.

Plugin Legend - Label Configuration

Name	Type	Default	Description
`boxWidth`	Number	40	width of coloured box
`font.size`	Number	12	font size of text
`font.style`	String	'normal'	font style of text
`color`	Color	'#666'	Color of text
`font.family`	String	"Roboto"	Font family of legend text.
`padding`	Number	10	Padding between rows of colored boxes
`generateLabels`	Function		Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box.
`filter`	Function	null	Filters legend items out of the legend. Receives 2 parameters, a Legend Item and the chart data.
`usePointStyle`	Boolean	false	Label style will match corresponding point style (size is based on fontSize, boxWidth is not used in this case).
`backgroundColor`	Style/Null	Null	Background color of datalabels.

Events

Event handling in Charts differs from other TE React components - in the options parameter you can define which events should be triggered and handlers for some of them (click, hover).

Name	Type	Default	Description
`events`	string[ ]	`['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove']`	The `events` option defines the browser events that the chart should listen to for tooltips and hovering.
`onHover`	function	`null`	Called when any of the events fire. Called in the context of the chart and passed the event and an array of active elements (bars, points, etc).
`onClick`	function	`null`	Called if the event is of type `'mouseup'` or `'click'`. Called in the context of the chart and passed the event and an array of active elements.

JavaScript

  import React from "react"; import { TEChart } from "tw-elements-react"; export default function ChartBarEventsExample(): 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], }, ], }} options={{ // This chart will not respond to mousemove, etc events: ["click"], }} /> ); }

Charts

Bar chart

Line chart

Bar chart horizontal

Pie chart

Doughnut chart

Polar chart

Radar chart

Bubble chart

Scatter chart

Bar chart with custom options

Bar chart with custom tooltip

Bar chart with darkmode customization

Bar chart dark mode customization (with darkOptions property)

Charts - API

Import

Properties

TEChart

Options

Line options

Bar options

Radar chart

Doughnut and Pie

Polar Area chart

Bubble chart

Scatter chart

Plugin Legend

Plugin Legend - Label Configuration

Events

Charts

Tailwind CSS React Charts

Bar chart

Line chart

Bar chart horizontal

Pie chart

Doughnut chart

Polar chart

Radar chart

Bubble chart

Scatter chart

Bar chart with custom options

Bar chart with custom tooltip

Bar chart with darkmode customization

Bar chart dark mode customization (with darkOptions property)

Related resources

Charts - API

Import

Properties

TEChart

Options

Line options

Bar options

Radar chart

Doughnut and Pie

Polar Area chart

Bubble chart

Scatter chart

Plugin Legend

Plugin Legend - Label Configuration

Events