Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar

Data visualization library

Version 5.1.0GithubStorybook

A library that helps theme data visualizations with Paste tokens.

Usage Guide

Usage Guide page anchor

This package is meant to be used with another data visualization library to style visualizations.

Installation

Installation page anchor
yarn add @twilio-paste/data-visualization-library - or - yarn add @twilio-paste/core

usePasteHighchartsTheme

usePasteHighchartsTheme page anchor

This is a React Hook to take a Highcharts config and add Paste colors and fonts.

import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import { usePasteHighchartsTheme } from "@twilio-paste/data-visualization-library";

const LineChartOptions = {
  title: { text: "Solar Employment Growth by Sector, 2010-2016" },
  subtitle: { text: "Source: thesolarfoundation.com" },
  series: [
    {
      name: "Installation",
      data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
    },
    {
      name: "Manufacturing",
      data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
    },
    {
      name: "Sales & Distribution",
      data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
    },
    {
      name: "Project Development",
      data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
    },
    {
      name: "Other",
      data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
    },
  ],
};

const LineChartExample = () => {
  const themedLineChartOptions = usePasteHighchartsTheme(LineChartOptions);
  return <HighchartsReact highcharts={Highcharts} options={themedLineChartOptions} />;
};

The hook adds the following styles(link takes you to an external page):

  • colors: the colors Highcharts cycles through for the chart's series
  • chart: the background color
  • title, subtitle, legend, credits, label, and tooltip: the font, text colors, and background color
  • xAxis, yAxis: the font, text colors, and the line and tick colors.

To learn more about the configurations available, check out the Highcharts API documentation(link takes you to an external page).

applyPasteHighchartsModules

applyPasteHighchartsModules page anchor

This is a helper function to initiate Highcharts modules that are not included by default. The accessibility(link takes you to an external page) module is a mandatory module, but you can pass as many other modules as you want. This hook should be used at the component level where the Highcharts namespace is passed to HighchartsReact.

import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import HighchartsAccessibilityModule from "highcharts/modules/accessibility";
import HighchartsExportingModule from "highcharts/modules/exporting";
import { applyPasteHighchartsModules } from "@twilio-paste/data-visualization-library";

applyPasteHighchartsModules(Highcharts, HighchartsAccessibilityModule, HighchartsExportingModule);

const LineChartExample = () => {
  return <HighchartsReact highcharts={Highcharts} />;
};

```