Skip to content
Get Pro
Utilities

Chart Patterns

Single-colour textures for charts, on a 6px base tile so lines and dots land on whole pixels and stay crisp at any pixel density.

$149 once · every Pro piece

Customize

A catalogue of every preset (lines, grids, dashed and dotted, dots, circles, tiles; -sparse doubles the spacing, -dense halves it), drawn as SVG patterns or canvas patterns, each enlarging on hover. Then patterns at work: a hatched area, patterned bars with one hot month, a donut whose slices differ by hatch direction rather than hue, budget rows where solid is spent and stripes are what is left, and textured backgrounds that replace gridlines and fade at every edge.

Install

npx shadcn@latest add @obsyde/chart-patterns

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { ChartPatternsDemo } from '@/components/obsyde/ember/chart-patterns/ChartPatternsDemo';

export function Example() {
  return (
    <ChartPatternsDemo view="catalogue" />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/chart-patterns/ChartPatternsDemo.tsxcomponent
  • ember/chart-patterns/chart-patterns.cssstyles
  • ember/viz-kit/viz-kit.cssshared
  • ember/viz-kit/Tooltip.tsxshared
  • ember/viz-kit/focus.tsshared
  • ember/viz-kit/patterns.tsxshared
  • ember/viz-kit/roll.tsshared
  • ember/shared/rolling-number.cssshared
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/viz-kit/scale.tsshared
  • ember/viz-kit/motion.tsshared
  • ember/viz-kit/chart.tsxshared
  • ember/shared/ember.cssshared
  • ember/viz-kit/touch.tsshared
  • ember/viz-kit/keyboard.tsshared
  • ember/viz-kit/size.tsshared
  • ember/viz-kit/shape.tsshared
  • ember/viz-kit/series.tsxshared
  • ember/viz-kit/Legend.tsxshared
  • ember/viz-kit/Grid.tsxshared
  • ember/viz-kit/demo.tsxshared
  • ember/viz-kit/demo.cssshared
  • ember/viz-kit/Axis.tsxshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
viewView'catalogue' | 'area' | 'bars' | 'donut' | 'remaining' | 'backgrounds''catalogue'
patternPattern'diagonal-up' | 'diagonal-down' | 'diagonal-up-sparse' | 'vertical' | 'vertical-dense' | 'horizontal' | 'crosshatch' | 'grid' | 'grid-dotted' | 'dots' | 'dots-sparse' | 'diagonal-dots-up' | 'circles-dense' | 'circles' | 'blocks' | 'checkerboard-xs' | 'checkerboard-inset''diagonal-up'
scaleScalenumber1
strokeWidthStroke widthnumber1
rendererRenderer'svg' | 'canvas''svg'
seedSeednumber6