What is the dashboard vizualization ui framework that we use for Twilio?

[mjanssen2021]

I am soon going to be working on some data visualization stuff for the Verify Insights product. What UI framework can the developers use for a data dashboard?

[TheSisb]

Hey @mjanssen2021!

We use Highcharts. We have a page of information about it on our doc site too.

[mjanssen2021]

Thanks @TheSisb ! Is there a link where I can see what data viz components (charts/graphs/oh my) are available for designers and developers to choose from? All i'm finding are links to API or technical specs... :)

[mjanssen2021]

I did find the story book link: https://paste-storybook.twilio.design/?path=/story/libraries-data-visualization--line-chart

But is it just these 6 components that we support? Nothing else? Just want to be sure! Thanks!

[TheSisb]

Hi @mjanssen2021,

We theoretically support all chart types, however those are the only ones we created examples for. All of those examples were pulled almost verbatim from the Highcharts docs, then we added our library theme to it with our React hook. It should work the same with any example from the official Highcharts website.

This library is still early in development, so please reach out if you run into any rough edges!

[mjanssen2021]

Got it - thanks! So this is the link where I can play with real live examples of all the charts components available right?
https://www.highcharts.com/demo

[TheSisb]

That's right. Your engineering partners can apply the Paste styling hook over any of those examples as per the docs.

[mjanssen2021]

Great thanks!

[bhamtil-twilio]

Hi @TheSisb, is there a demand to create our own Paste data viz components, or is the plan to simply use this third party library for now?

[SiTaggart]

Hi @bhamtil-twilio the creation of an accessible charting library or set of accessible custom chart components is an incredible amount of engineering effort, more than any team at Twilio should be considering to take on. It's so hard to get right.

We'll be using a third party for charting as it's the most sensible thing to do, and creates the best experience for our customers with regard to accessible charting.

Hope that makes sense!

[bhamtil-twilio]

It does! And thanks for the quick response. I have to ask – what about adding components to our Figma library based off the HighCharts library? Just thinking about how to get designers at Twilio up and running quickly with a data viz components (even as placeholders) to keep Twilio experiences more consistent? Any custom designed/built graphics would be an exception, not the norm.

[SiTaggart]

Yup, I think that would be a great idea.

I think in the long run, we'll have some charting and visualization guidelines that might suggest types of charts for certain situations, where and when to use them. So it would be super useful to have Figma components that are aligned with those guidelines as drop in placeholders when design data viz screens!

Great idea!