# 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](/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](/react/docs/charts/overview/) 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.

```html
<div class="chart">
  <canvas id="chartjs-line"></canvas>
</div>

<script>
adminkit.chartjs("#chartjs-line", function (theme) {
  return {
    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"
          }
        }
      }
    }
  };
});
</script>
```
```tsx code
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.

```tsx title="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](/react/docs/charts/overview/#chartjs)).

## 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:

```tsx
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

> This example is only available in **AdminKit PRO**. [Learn more](/pricing/#react).

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

```html
<div id="apexcharts-line"></div>

<script>
var 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: function(val) {
          return val + " (mins)"
        }
      }
    }, {
      title: {
        formatter: function(val) {
          return val + " per session"
        }
      }
    }, {
      title: {
        formatter: function(val) {
          return val;
        }
      }
    }]
  },
  grid: {
    borderColor: "#f1f1f1",
  }
}
adminkit.apexcharts("#apexcharts-line", function () {
  return options;
});
</script>
```
```tsx code
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.

## Related

- [Next.js line chart](/nextjs/docs/charts/line-chart/): the same chart in AdminKit for Next.js
- [Bootstrap 5 line chart](/bootstrap/docs/charts/line-chart/): the line chart of the HTML version
- [Chart setup](/react/docs/charts/overview/): the `ChartJs`, `ApexChart` and `VectorMap` components
- [Bar chart](/react/docs/charts/bar-chart/): compare values between categories
- [Chart.js demo](https://react-demo.adminkit.io/charts-chartjs) and [ApexCharts demo](https://react-demo.adminkit.io/charts-apexcharts)

---

Canonical HTML page: https://adminkit.io/react/docs/charts/line-chart/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io