Charts

A collection of different chart components using chart.js

Newsletter revenue over time (USD)

Installation

npx solidui-cli@latest add charts

Usage

import { LineChart } from "~/components/ui/charts"

const chartData = {
  labels: ["January", "February", "March", "April", "May"],
  datasets: [
    {
      label: "Sales",
      data: [50, 60, 70, 80, 90],
      fill: true // remove if you want a Line Chart
    }
  ]
}
<LineChart data={chartData} />

Pie Chart

Sales

Bar Chart

Sales

Other charts

You can use all charts provided by chart.js:

BarChart
BubbleChart
DonutChart
LineChart
PieChart
PolarAreaChart
RadarChart
ScatterChart