Skip to contentSkip to navigationSkip to topbar
Paste assistant Assistant
Figma
Star

Data visualization library

Version 5.0.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

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).