search results:

  • Standard
  • React
Pricing Learn Community
  • + D
  • Light
  • Dark
  • System
logo TW Elements
  • Getting started
    • Quick start
    • Dark mode
    • Theming
    • Changelog
  • CommercialNew
    • Pricing
    • License
    • Installation
    • Git & repository
    • Premium Support
  • Integrations
    • Next
  • Content & styles
    • Animations
    • Animations extended
    • Colors
    • Dividers
    • Figures
    • Headings
    • Hover effects
    • Icons
    • Images
    • Mask
    • Shadows
    • Typography
  • Navigation
    • Breadcrumbs
    • Footer
    • Pagination
    • Pills
    • Tabs
  • Components
    • Accordion
    • Alerts
    • Avatar
    • Badges
    • Button group
    • Buttons
    • Cards
    • Carousel
    • Collapse
    • Dropdown
    • Link
    • List group
    • Modal
    • Paragraphs
    • Placeholders
    • Popover
    • Progress
    • Rating
    • Scroll back to top button
    • Social buttons
    • Spinners
    • Timeline
    • Toasts
    • Tooltip
    • Video carousel
  • Forms
    • Checkbox
    • File input
    • Form templates
    • Inputs
    • Login form
    • Radio
    • Range
    • Registration form
    • Search
    • Select
    • Switch
    • Textarea
  • Data
    • Charts
    • Tables
  • Methods
    • Ripple
  • ResourcesNew
    • Playground
    • YouTube Channel
    • Private FB Group
    • Newsletter
    • UI Design course New
  • Overview
  • API

Charts

Tailwind CSS React Charts

Use responsive charts component with helper examples for simple chart, line chart, bar chart, radar chart, pie chart, doughnut & more. Open source license.


Bar chart

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

Loading...
  • JSX
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.

Loading...
  • JSX
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...
  • JSX
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...
  • JSX
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...
  • JSX
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...
  • JSX
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...
  • JSX
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...
  • JSX
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...
  • JSX
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...
  • JSX
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...
  • JSX
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.

Loading...
  • JSX
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.

Loading...
  • JSX
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",
            },
          },
        },
      }}
    />
  );
}

Related resources

colors hover effects badges popover progress timeline tooltip tables box sizing center grid items color picker colors dark theme overflow overflow hidden position

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

  • 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 with darkmode customization (with darkOptions property)
  • Related resources

Charts - API


Import

  • javascript
import { TEChart } from "tw-elements-react";

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"],
      }}
    />
  );
}
  • Import
  • Properties
  • Options
  • Line chart
  • Bar chart
  • Radar chart
  • Doughnut & Pie
  • Polar chart
  • Bubble chart
  • Scatter chart
  • Legend
  • Legend label
  • Events
Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
Join our mailing list now
© 2023 Copyright: MDBootstrap.com