Microreact
  • Introduction
  • Introductory Videos
  • About Microreact
    • Privacy and Terms Of Service
    • Open source software used by Microreact
    • Change Log
  • Instructions
    • Navigating the site
      • Managing Projects
    • Navigating within a project
      • History sidebar
      • Selection sidebar
      • Views Sidebar
    • Creating a Project
      • Supported File Formats
      • Metadata Data
      • Tree Data
      • Map Data
      • Timeline Data
      • Network Data
      • Matrix Data
    • Adding and Editing Panels
      • Data Table
      • Map
      • Timeline
      • Tree
      • Network
      • Data-slicer
      • Chart overview
        • Area Chart
        • Line Chart
        • Bar Chart
        • Circle, Tick, Point Charts
        • Custom charts
        • Pie Chart
        • Multi-variable Chart
        • Heatmap
      • Note Panel
      • Matrix
    • Selecting and Filtering Data
    • Labels, Colours, and Shapes
    • Saving and version control
    • Access Control and Project Sharing
      • Download Project Files
      • URL control options
    • Tips & FAQ
      • How to Link Microreact projects to Google Sheets
  • API
    • API Access Tokens
    • Creating Projects via API
    • Updating Projects via API
    • Deleting Projects via API
    • Sharing Projects via API
    • Migrating to the new API
  • Feedback
    • Contact the Microreact team
Powered by GitBook
On this page

Was this helpful?

  1. Instructions
  2. Adding and Editing Panels
  3. Chart overview

Custom charts

PreviousCircle, Tick, Point ChartsNextPie Chart

Last updated 8 months ago

Was this helpful?

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:

Once you have created 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 lozenge in the custom chart panel.

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. A demonstration of how to create a Gist and use that in the Vega-lite editor is available in below.

website
video
https://vega.github.io/vega-lite/examples/
https://vega.github.io/editor/#/custom/vega-lite