How to create a data visualization framework with Chart plugin

Pavel Kuligin
2 min readAug 30, 2019

--

This short guide shows how to create and maintain your data visualization system using Templates in Chart plugin.

When do you really need a data visualization framework?

If you are working on a product with lots of charts, you need to define rules and design principles for data visualization. A good example is GE’s Predix Design System: https://www.predix-ui.com/#/design/foundation/data-vis.

Chart allows you to define the core of your Data Viz framework such as colors, grid, and labels, but Chart also provides a lot of configurable settings such as sorting in Pie chart or the type of data markers in Line chart. Look at the full example of template in Chart.

If your company or client uses a charting library like Highcharts or Plotly, you can quickly reproduce their styles using a template in Chart.

Using templates in Chart

Chart comes with a default Template out of the box, which can be edited and updated with only a few clicks. Want to add additional Templates to test different color palettes or themes? No problem! You can create as many as you need. The Template is a straightforward JSON file, which can be edited directly from the plugin UI, or you can copy it out to your favorite code editor to review. It is beneficial when you need to apply style updates across several of your charts. By combining templates and the chart update feature, you can see changes instantly.

Different templates

If you want to create two templates for Light and Dark themes of your product, you also can easily make it. Mark one template as default and switch between templates while creating a chart.

Cisco’s Momentum Design Data Viz framework created using Chart

Ready to share with your team?

When you have done settings the framework style for your Chart Template, you can share it with your teammates — just send them JSON object from your Template editor, and they can easily add it to Chart: Add new template → Paste JSON → Create template.

Try Chart for free

Download and install Chart from the official page and enjoy two free chart types. Pay just $20/year to unlock all charts and save hours of boring work.

Follow me on Twitter or join our Slack for news and updates.

--

--