ChartKit

Getting Started

Get up and running with ChartKit in your Next.js project in just a few minutes.

Installation

Install ChartKit using your preferred package manager:

bash
npm install @derpdaderp/chartkit

Or with yarn:

bash
yarn add @derpdaderp/chartkit

Basic Usage

Import the components you need and start building beautiful charts:

app/dashboard/page.tsx
import { Sparkline, KpiCard, LineChart } from '@derpdaderp/chartkit';

// Sample data
const data = [
  { value: 10 },
  { value: 25 },
  { value: 15 },
  { value: 30 },
  { value: 22 },
];

export default function Dashboard() {
  return (
    <div className="p-8">
      <KpiCard
        label="Revenue"
        value={125000}
        delta={12.5}
        data={data}
          theme="midnight"
        />
      )}
    </div>
  );
}

Using Themes

ChartKit comes with 17 built-in themes. Pass the theme name to any component:

tsx
// Dark themes (13):
// 'midnight', 'emerald', 'mono', 'slate', 'arctic',
// 'orchid', 'obsidian', 'neon', 'mocha', 'owl',
// 'retro', 'copper', 'rose'

// Light themes (4):
// 'sunset', 'silver', 'pearl', 'latte'

<Sparkline
  data={data}
  theme="neon"
  width={120}
  height={32}
/>

You can also access theme colors directly for custom styling:

tsx
import { themes } from '@derpdaderp/chartkit';

const t = themes['midnight'];
console.log(t.colors); // ['#4ade80', '#38bdf8', ...]
console.log(t.bg);     // '#0c0c0c'

Responsive Charts

Use the useContainerWidth hook to make charts responsive:

tsx
import { LineChart, useContainerWidth } from '@derpdaderp/chartkit';

function ResponsiveChart({ data }) {
  const { ref, width } = useContainerWidth<HTMLDivElement>();
  
  return (
    <div ref={ref} style={{ width: '100%' }}>
      {width > 0 && (
        <LineChart
          data={data}
          series={series}
          width={width}
          theme="midnight"
        />
      )}
    </div>
  );
}

Next Steps