Custom charts

When the standard Microreact charts don't provide the visualisation you need, you can create a custom chart. The Custom Chart option uses a Vega-Lite script to program the visual.

First, users can browse the Vega gallery to get ideas for potential visuals to include in your project:

Once you know the visual you want to create, you can use Vega-lite Editor (an in-browser tool NOT managed by CGPS) to build and run your code:

Note, the Vega-lite Editor can help to ensure users that their chart is visualising their data as intended. However, the Editor requires access to data in order to test and troubleshoot. There are several best practice suggestions to using the Editor:

Option 1) Give the Vega-lite Editor access to your data through a public url

Option 2) Store your real data on a secret (i.e. private) Github page. Once you complete testing in the editor, you can then delete the Github page. This will keep your datasets private. More on this in the video below!

Option 3) Give the Vega-lite Editor access to a fake dataset that simulates your real dataset. This means keeping all the columns and data structure the same between the real and fake data.

Copy your Vega-Lite script from the Vega Editor and paste it into the Vega Spec losenge in the custom chart panel.

Last updated