Skip to content

feat(website): update data viz docs with plugin and license info #4228

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Feb 4, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file not shown.
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ import {
PieChartCaption,
LineChartCaption,
} from "../../../component-examples/DataVisualizationExamples";
import FigmaColors from "../../../assets/images/foundations/data-visualization/figma-colors.png";
import PieChart from "../../../assets/images/foundations/data-visualization/pie-chart.png";
import LineChart from "../../../assets/images/foundations/data-visualization/line-chart.png";
import DefaultLayout from "../../../layouts/DefaultLayout";
Expand Down Expand Up @@ -67,6 +66,8 @@ The easiest way to use the data visualization tokens in your charts is to use `u

Be sure to include the [Highcharts Accessibility module](/foundations/data-visualization#adding-highcharts-accessibility-module) to ensure that your charts are accessible to all users.

The design systems team maintains a Highcharts license for Twilio Console, SendGrid, Flex, Segment, and internal tools. If you are a Twilio customer building with Highcharts, you'll need [your own license](https://shop.highcharts.com/).

<LivePreview
scope={{
Highcharts,
Expand All @@ -84,13 +85,13 @@ Be sure to include the [Highcharts Accessibility module](/foundations/data-visua

### For designers

To get started incorporating our data visualization design tools into your own Twilio customer experiences and prototypes, please visit our [Design Guidelines for Paste](/introduction/for-designers/design-guidelines).
To start using data visualization in your own Twilio customer experiences and prototypes, you can use the [Highcharts Core Figma plugin](https://www.figma.com/community/plugin/1369795683946720598/highcharts-core).

The [color palette](#color-palettes) used for data visualizations is available as variables in all themes. However to use the Highcharts Figma plugin, you'll have to copy the colors into the local variables in your file according to the Highcharts plugin's theme.

The [color palette](#color-palettes) used for data visualizations are available as color styles in both the [Default Theme](https://www.figma.com/file/OZKRQFOkOAl413m5JVIYE6/Paste-Default-Theme) and [Dark Theme](https://www.figma.com/file/TZMBaCxXkX8u5aVRVYboid/Paste-Dark-Theme?node-id=0%3A1) libraries.
Not every part of a chart is themeable through the plugin, so you still won't get an exact match of charts built in production. Use the plugin for ideation purposes rather than for exact specs.

<Box maxWidth="size30" paddingBottom="space110" marginX="auto">
<Image src={FigmaColors} placeholder="blur" style={{ width: "100%", height: "100%" }} />
</Box>
Alternatively, you could use [Highcharts GPT](https://www.highcharts.com/chat/gpt/) to generate charts and SVG images to copy into Figma.

## Color palettes

Expand Down
Loading