Data visualization library

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

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} />;
};

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} />;
};