Plotteus logoPlotteus

Examples

Docs

Theming

Colors

Plotteus automatically handles custom background color of your chart. You can change set it by passing a

StoryOptions

object to the

makeStory

function.

Fonts

To set a custom font family, target the chart node directly with CSS, otherwise the default font will be inherited from its parent. Plotteus wraps titles and makes its best to assure that the chart works well with any font.

const div = document.querySelector("#story");
const steps = [{ key: "Intro", chartType: "bar", groups: [
  {
    key: "Alice",
    data: [
      { key: "A", value: 1 },
      { key: "B", value: 1.2 },
      { key: "C", value: 1.4 },
    ],
  },
  {
    key: "Bob",
    data: [
      { key: "A", value: 1.6 },
      { key: "B", value: 1.8 },
      { key: "C", value: 1.6 },
    ],
  },
  {
    key: "Cecile",
    data: [
      { key: "A", value: 1.4 },
      { key: "B", value: 1.2 },
      { key: "C", value: 1 },
    ],
  },
}];
const options = { svgBackgroundColor: "#000000" };
const story = makeStory(div, steps, options);
story.render("intro", 1);