@datadog/vis-style

Datadog Data Visualization SDK - Colors and Styles

Usage no npm install needed!

<script type="module">
  import datadogVisStyle from 'https://cdn.skypack.dev/@datadog/vis-style';
</script>

README

@datadog/vis-style

This package offers Datadog styles (color palettes, design system token colors, etc), including variants for dark mode.

Install

yarn add @datadog/vis-style

Documentation and Demos

Visit the live demos page page for examples of all color swatches

Usage

import vega from "vega";
import { COLOR_PALETTES } from "@datadog/vis-style";

// To register all color palettes for usage with Vega-Lite
COLOR_SCHEMES.forEach(({ name, scheme }) => {
  vega.scheme(name, scheme);
});

To use individual palettes

import { COLOR_PALETTES } from "@datadog/vis-style";

// To register all color palettes for usage with Vega-Lite
const palette = COLOR_PALETTES.find((p) => p.name === "dd-classic-line");

// Colors can be found in palette.scheme as a list of color identifiers, or a color interpolation function.