Hooks

ChartKit exports several utility hooks for building responsive and animated charts.

useAutoTheme

Automatically switches chart themes based on your app's dark/light mode. Works with next-themes, Tailwind dark mode, or system preferences.

tsx

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

function Chart({ data, series }) {
  // Automatically switches between themes based on dark mode
  const theme = useAutoTheme({ light: 'sunset', dark: 'neon' });
  
  return <LineChart data={data} series={series} theme={theme} />;
}

// Or use system preference instead of DOM class
const theme = useAutoTheme({ 
  light: 'sunset', 
  dark: 'midnight',
  useSystemPreference: true 
});

Options

Prop	Type	Default	Description
`light*`	`ThemeName`	-	Theme for light mode
`dark*`	`ThemeName`	-	Theme for dark mode
`selector`	`string`	`"html"`	DOM selector to observe for class changes
`darkClass`	`string`	`"dark"`	Class that indicates dark mode
`useSystemPreference`	`boolean`	`false`	Use system preference instead of DOM class

useContainerWidth

A hook for making charts responsive by tracking their container width.

tsx

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

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

useResizeObserver

A more complete hook that tracks both width and height of an element.

tsx

import { useResizeObserver } from '@derpdaderp/chartkit';

function AdaptiveChart() {
  const { ref, size, ready } = useResizeObserver<HTMLDivElement>();
  
  return (
    <div ref={ref} style={{ width: '100%', height: '400px' }}>
      {ready && (
        <MyChart width={size.width} height={size.height} />
      )}
    </div>
  );
}

Return Value

Prop	Type	Default	Description
`ref`	`RefObject<T>`	-	Ref to attach to the container element
`size`	`{ width: number; height: number }`	-	Current size of the element
`ready`	`boolean`	-	Whether the element has been measured

useAnimatedMount

A hook for animating chart elements on mount with various animation styles.

tsx

import { useAnimatedMount, estimatePathLength } from '@derpdaderp/chartkit';

function AnimatedPath({ pathD }) {
  const { getPathStyle, fadeStyle } = useAnimatedMount({
    duration: 800,
    delay: 200,
  });
  
  const length = estimatePathLength(pathD);
  
  return (
    <svg style={fadeStyle}>
      <path
        d={pathD}
        style={getPathStyle(length)}
        fill="none"
        stroke="currentColor"
      />
    </svg>
  );
}

Options

Prop	Type	Default	Description
`duration`	`number`	`600`	Animation duration in ms
`delay`	`number`	`0`	Animation delay in ms
`easing`	`string`	`"ease-out"`	CSS easing function

Return Value

Prop	Type	Default	Description
`isAnimated`	`boolean`	-	Whether animation has completed
`progress`	`number`	-	Progress from 0 to 1
`fadeStyle`	`CSSProperties`	-	Styles for fade-in animation
`scaleStyle`	`CSSProperties`	-	Styles for scale animation
`getPathStyle`	`(pathLength: number) => CSSProperties`	-	Returns styles for path draw animation

useUniqueId

Generates unique IDs for SVG elements like filters and gradients.

tsx

import { useUniqueId } from '@derpdaderp/chartkit';

function ChartWithGlow() {
  const glowId = useUniqueId('glow');
  
  return (
    <svg>
      <defs>
        <filter id={glowId}>
          <feGaussianBlur stdDeviation="2" />
        </filter>
      </defs>
      <path filter={`url(#${glowId})`} />
    </svg>
  );
}

useMouseTracking

Tracks mouse position over an SVG chart for tooltips and crosshairs.

tsx

import { useMouseTracking } from '@derpdaderp/chartkit';

function InteractiveChart() {
  const { svgRef, mouse, handleMouseMove, handleMouseLeave } = useMouseTracking({
    marginLeft: 60,
    chartWidth: 500,
  });
  
  return (
    <svg
      ref={svgRef}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
    >
      {mouse.x !== null && (
        <line x1={mouse.x} y1={0} x2={mouse.x} y2={300} />
      )}
    </svg>
  );
}