@builtnorth/charts

Clean and minimal chart components using visx for WordPress admin screens.

Installation

npm install @builtnorth/charts

Features

• 📊 Bar Chart - Clean bar charts with customizable colors and tooltips
• 📈 Line Chart - Smooth line charts with optional area fill and multi-line support
• 🍩 Doughnut Chart - Interactive doughnut charts with legends
• 🎨 CSS Variables - Fully customizable using CSS variables
• 📱 Responsive - Automatically adjusts to container size
• 💡 Tooltips - Interactive tooltips on all chart types
• 🎯 WordPress Ready - Designed to work seamlessly with WordPress admin styles

Usage

import { BarChart, LineChart, DoughnutChart } from '@builtnorth/charts';

// Bar Chart
<BarChart
  data={[
    { label: 'Jan', value: 30 },
    { label: 'Feb', value: 45 },
    { label: 'Mar', value: 28 }
  ]}
  xAxisLabel="Month"
  yAxisLabel="Sales"
  formatTooltip={d => `$${d}k`}
/>

// Line Chart
<LineChart
  data={[
    { date: new Date('2024-01-01'), value: 30 },
    { date: new Date('2024-02-01'), value: 45 }
  ]}
  showArea={true}
  formatTooltip={d => `${d} visitors`}
/>

// Doughnut Chart
<DoughnutChart
  data={[
    { label: 'Desktop', value: 45 },
    { label: 'Mobile', value: 35 },
    { label: 'Tablet', value: 20 }
  ]}
  donutThickness={80}
/>

Props

BarChart

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | array | required | Array of data objects | | xAccessor | function | d => d.label | Function to access x value | | yAccessor | function | d => d.value | Function to access y value | | color | string | CSS variable | Bar color | | showXAxis | boolean | true | Show x axis | | showYAxis | boolean | true | Show y axis | | xAxisLabel | string | '' | X axis label | | yAxisLabel | string | '' | Y axis label | | formatTick | function | d => d | Format axis ticks | | formatTooltip | function | d => d | Format tooltip values | | onBarClick | function | undefined | Click handler |

LineChart

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | array | required | Array of data objects | | xAccessor | function | d => d.date | Function to access x value | | yAccessor | function | d => d.value | Function to access y value | | color | string | CSS variable | Line color | | showArea | boolean | false | Show area under line | | multiLines | boolean | false | Enable multiple lines | | lines | array | [] | Array of line configs for multiLines (name, color, data, optional yAxis: 'left' \| 'right') | | showRightYAxis | boolean | true | When any line uses yAxis: 'right', render a second Y axis (visx AxisRight) | | formatTick | function | d => d | Format left Y axis ticks | | formatTickRight | function | formatTick | Format right Y axis ticks | | formatXTick | function | timeFormat | Format x axis ticks | | formatTooltip | function | d => d | Format tooltip values | | minRightYDomainMax | number | 0 | Minimum right-axis domain max (same semantics as minYDomainMax) |

DoughnutChart

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | array | required | Array of data objects | | valueAccessor | function | d => d.value | Function to access value | | labelAccessor | function | d => d.label | Function to access label | | colors | array | defaultColors | Array of colors | | donutThickness | number | 60 | Thickness of donut | | showLegend | boolean | true | Show legend | | formatTooltip | function | d => d | Format tooltip values | | onSliceClick | function | undefined | Click handler |

CSS Variables

The charts use CSS variables for styling that automatically inherit from WordPress admin:

--chart--color-primary: var(--wp-admin-theme-color, #007cba);
--chart--color-primary-hover: var(--wp-admin-theme-color-darker, #005a87);
--chart--color-base: rgb(247, 247, 247);
--chart--color-white: #ffffff;
--chart--color-black: #000000;
--chart--color-light-gray: #f0f0f0;
--chart--color-medium-gray: #757575;
--chart--color-dark-gray: #333333;
--chart--color-border-gray: rgb(217, 219, 222);
--chart--color-success: #00a32a;
--chart--color-warning: #dba617;
--chart--color-error: #d63638;
--chart--color-info: #72aee6;

License

GPL-2.0-or-later