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: https://vega.github.io/vega-lite/examples/

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: https://vega.github.io/editor/#/custom/vega-lite

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.

Option 4) The editor tool is open-sourced and can be installed on local servers if you wish to continuously use the editor tool with real data. Once you have your Vega-lite script, head to your Microreact project. Create a New Chart specifying Custom as the chart type.

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