Charts that fit in. Thirty-three families.

Readouts, legends, and states come built in, in light and dark, with motion from Moto.

See pricing
RevenueLine · Instrument panel

Four tiers. Small to dense.

Start with the charts every product needs. Reach for the specialists when the data gets dense.

  1. Lines, bars, donuts, heatmaps, and funnels, with readouts and range controls built in.

  2. Scatter, histogram, waterfall, and box plots, with the statistics beside the plot.

  3. Candlesticks, order books, treemaps, and timelines for trading and operations.

  4. Sankey flows, service networks, fleet maps, and point clouds.

Nine colorways. One attribute.

Set a colorway on the chart and every series, readout, and threshold follows.

Varialvarial-brand
Instrumentinstrument
Metalmetal
Brutalistbrutalist

The plot is easy. The rest is built in.

  1. ShellsFive shells, from analytical matte to instrument panel, designed with the plot.
  2. ReadoutsDate, value, and change follow the pointer. No tooltip plugin.
  3. LegendsHighlight a series and carry its total, wherever the layout has room.
  4. DensityStandard, dense, and micro: a dashboard, a side panel, a table cell.
  5. MotionMoto runs reveals, hovers, and comparisons: calm, analytical, or expressive.

Every chart is live. Not a screenshot.

These run the library's own markup, styles, and Moto motion, right here. They follow the site theme.

  • TrafficArea
  • ActivationFunnel
  • LatencyHistogram
  • Product fitRadar
  • FleetGeospatial
  • Regional salesBar
  • RetentionHeatmap
  • MarketsBubble
  • Channel shareTreemap
  • Service mapNetwork
  • RevenueLine
  • ChannelsGrouped bar

Plain markup. Attributes, not config.

Every chart is plain HTML and CSS on the Varial UI tokens. A theme change is one line.

<div data-chart-preview-root data-theme="dark" data-chart-colorway="instrument">
  <article
    class="varial-chart-source varial-chart-source--line"
    data-chart-family="line"
    data-shell="instrument-panel"
    data-density="standard"
  >
    <!-- identity bar, data rail, plot, readout -->
  </article>
</div>
  • Five shellsFrom analytical matte to instrument panel.
  • Three densitiesStandard, dense, and micro.
  • Theme as dataTheme and colorway are attributes on the root.
  • Built on Varial UISame tokens as the rest of your product.

Also in the runtime. Ours, top to bottom.

  1. Varial UI130 components and six product kits, themed in minutes.
  2. IconsFree, animated SVG icons with tones and effects.
  3. SpatialWeb pages made of paper, cloth, metal, and glass.
  4. MotoMotion that ships as code, not as a video.

Good questions. Short answers.

How many chart types are there?

Thirty-three families in four tiers, from sparklines and bars to sankeys, fleet maps, and point clouds.

Can the charts use my brand colors?

Yes. Pick one of nine colorways or set your own on the Varial UI tokens. Every series and readout follows.

Do I need a charting library too?

No. Readouts, legends, states, and motion are part of the chart.

Does it cost extra?

No. Charts come with Varial UI, in every plan.

Ship the dashboard. Skip the chart cleanup.

Charts come with Varial UI, in every plan.

See pricing