# 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>

<figure><img src="/files/MRIxHRoMVJql0a2wHse9" alt=""><figcaption></figcaption></figure>

The Vega-lite Editor can help to ensure users that their chart is visualising their data as intended. The editor requires access to data in order to test and troubleshoot. To get your data into the Vega-lite editor you can host your file anywhere the provides a publicly accessible link to the data file (your own website, cloud account, etc.) If that's not a convenient option, you can easily create a Github Gist. With a Gist, you can either make it public, or create a secret Gist. Important information about the privacy of secret Gists is available at Github's[ website](https://docs.github.com/en/get-started/writing-on-github/editing-and-sharing-content-with-gists/creating-gists). A demonstration of how to create a Gist and use that in the Vega-lite editor is available in [video](https://vimeo.com/944103728?share=copy) below.

<figure><img src="/files/q01D2AhyMMy8fw89aKMR" alt=""><figcaption></figcaption></figure>

Once you have created your Vega-lite script, head to your Microreact project. Create a New Chart specifying Custom as the chart type.

![](https://t26483244.p.clickup-attachments.com/t26483244/c97d830a-59a1-438a-8268-fef4fccccba4/image.png)

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

![](https://t26483244.p.clickup-attachments.com/t26483244/2a8da981-defb-44d9-89e2-952d0b5d3f0e/image.png)

{% embed url="<https://vimeo.com/944103728?share=copy>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.microreact.org/instructions/adding-and-editing-panels/charts-panel/custom-charts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
