React Line Chart

A React line chart with Chart.js: sales and orders over twelve months as curved lines in theme colors that follow light and dark mode.

A line chart shows how values change over time. It makes a trend, a peak or a dip easy to spot, and a second line lets you compare two series. AdminKit for React draws it with the ChartJs component, a wrapper around Chart.js, in the free and PRO versions. AdminKit PRO adds an ApexCharts version with ApexChart.

You pass a function of the theme colors, and the component calls it again when the color mode changes. Chart setup explains how the components work.

Example

Sales and orders per month. AdminKit's Chart.js defaults curve the lines (tension: 0.4), so the example does not set it.

import { ChartJs } from "@/components/plugins/chartjs";

export function SalesLineChart() {
  return (
    <div className="chart">
      <ChartJs
        aria-label="Sales and orders per month"
        config={(theme) => ({
          type: "line",
          data: {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            datasets: [
              {
                label: "Sales ($)",
                fill: true,
                backgroundColor: "transparent",
                borderColor: theme.primary,
                data: [2115, 1562, 1584, 1892, 1487, 2223, 2966, 2448, 2905, 3838, 2917, 3327],
              },
              {
                label: "Orders",
                fill: true,
                backgroundColor: "transparent",
                borderColor: "#adb5bd",
                borderDash: [4, 4],
                data: [958, 724, 629, 883, 915, 1214, 1476, 1212, 1554, 2128, 1466, 1827],
              },
            ],
          },
          options: {
            maintainAspectRatio: false,
            plugins: {
              legend: { display: false },
              tooltip: { intersect: false },
              filler: { propagate: false },
            },
            scales: {
              x: {
                grid: { color: "rgba(0,0,0,0.05)" },
                border: { color: "rgba(0,0,0,0.05)" },
              },
              y: {
                ticks: { stepSize: 500 },
                grid: { color: "transparent" },
              },
            },
          },
        })}
      />
    </div>
  );
}

Render it from a route in src/routes/. Each route loads when it is opened (React.lazy in src/app.tsx), so Chart.js only downloads with the first page that draws a chart.

src/routes/reports.tsx

import { SalesLineChart } from "@/components/sales-line-chart";

export default function Page() {
  return (
    <div className="card">
      <div className="card-header">
        <h2 className="card-title">Sales and orders</h2>
      </div>
      <div className="card-body">
        <SalesLineChart />
      </div>
    </div>
  );
}

Props

Prop	Type	Default	Description
`config`	`(theme: Theme) => ChartConfiguration`		The Chart.js configuration. Called again with the new colors when the color mode changes

Other props, such as id and aria-label, go to the <canvas>. The container needs a height, such as .chart (see Chart setup).

Straight lines and filled areas

If you want straight segments between the points, set tension: 0 on a dataset. To turn a line into an area chart, give the dataset a backgroundColor instead of "transparent". fill: true fills it down to the axis. Chart.js' color helper, which AdminKit's wrapper uses too, makes a theme color transparent:

import { color } from "chart.js/helpers";

// in the datasets of config(theme)
{
  label: "Sales ($)",
  fill: true,
  tension: 0,
  backgroundColor: color(theme.primary).alpha(0.2).rgbString(),
  borderColor: theme.primary,
  data: [2115, 1562, 1584, 1892, 1487, 2223],
}

Colors in dark mode

The "Orders" line and the grid keep the fixed colors of the HTML example (#adb5bd, rgba(0,0,0,0.05)). For colors that follow the mode, read them from theme. theme["gray-500"] is #adb5bd in light mode and follows the gray scale of dark mode. When you leave grid.color out, the grid takes the border color that AdminKit sets for the current mode.

ApexCharts example

Pro

This example is only available in AdminKit PRO. Learn more.

Here ApexChart draws three series, each with its own line width (stroke.width) and dash (stroke.dashArray). curve: "straight" turns off the smoothing.

import { ApexChart } from "@/components/plugins/apexcharts";

export function VisitsLineChart() {
  return (
    <div className="position-relative" style={{ minHeight: 365 }}>
      <ApexChart
        options={() => ({
          chart: { height: 350, type: "line", zoom: { enabled: false } },
          dataLabels: { enabled: false },
          stroke: { width: [5, 7, 5], curve: "straight", dashArray: [0, 8, 5] },
          series: [
            { name: "Session Duration", data: [45, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10] },
            { name: "Page Views", data: [35, 41, 62, 42, 13, 18, 29, 37, 36, 51, 32, 35] },
            { name: "Total Visits", data: [87, 57, 74, 99, 75, 38, 62, 47, 82, 56, 45, 47] },
          ],
          markers: { size: 0 },
          xaxis: {
            categories: ["01 Jan", "02 Jan", "03 Jan", "04 Jan", "05 Jan", "06 Jan", "07 Jan", "08 Jan", "09 Jan", "10 Jan", "11 Jan", "12 Jan"],
          },
          tooltip: {
            y: [
              { title: { formatter: (val: string) => val + " (mins)" } },
              { title: { formatter: (val: string) => val + " per session" } },
              { title: { formatter: (val: string) => val } },
            ],
          },
          grid: { borderColor: "#f1f1f1" },
        })}
      />
    </div>
  );
}

Accessibility

The <canvas> of ChartJs has role="img". Screen readers cannot read the lines, so give it an aria-label that names the chart, and state the key figures in text.
The dashed "Orders" line differs from "Sales ($)" by its dash as well as its color, which helps when colors are hard to tell apart. The legend is hidden, so name the series near the chart.
Under prefers-reduced-motion, the charts draw without the entrance animation.

Next.js line chart: the same chart in AdminKit for Next.js
Bootstrap 5 line chart: the line chart of the HTML version
Chart setup: the ChartJs, ApexChart and VectorMap components
Bar chart: compare values between categories
Chart.js demo and ApexCharts demo

ExampleCopy Anchor Link

PropsCopy Anchor Link

Straight lines and filled areasCopy Anchor Link

Colors in dark modeCopy Anchor Link

ApexCharts exampleCopy Anchor Link

AccessibilityCopy Anchor Link

RelatedCopy Anchor Link

On this page