Skip to main content

Advanced custom charts

This feature is currently available as a Public Preview only

During a Public Preview, only eligible customers can access this feature. Additionally, there may be minor updates to the functionality and design of these features when they are released in General Availability.

If you would like to use this feature, create a Support ticket at Celonis Support.

For more information about our Public Preview releases, including the level of Support offered with them, see: Feature release types

The Vega component is a custom code component used to create advanced custom charts. With the Vega component, you can create highly-customized, niche visualizations that use Vega and Vega-Lite directly within the Celonis Platform, giving you flexibility and extensibility. You can also leverage chart samples from the Vega-lite example gallery and adapt them for for your specific use case.

Important

We strongly recommend using the Vega component only where other chart components are not sufficient for your visualization.

  1. In the Vega-lite example gallery, find a chart that is similar to the chart you want to create.

    Important

    Any references to third-party products or services do not constitute Celonis Product Documentation nor do they create any contractual obligations. This material is for informational purposes only and is subject to change without notice.

    Celonis does not warrant the availability, accuracy, reliability, completeness, or usefulness of any information regarding the subject of third-party services or systems.

  2. In edit mode, add a Vega Widget component to your View.

  3. Add the data fields you want to include in your chart from the Knowledge sidebar.

  4. Copy the JSON specification for the chart in step 1 and paste it into the Specification code area.

  5. Update the JSON in the Specification code area to reference the fields from your query.

    Tip

    As the data defined in the query is automatically available, you don't need to include a data block like "data": {"url": "data.csv"} or "data": {"values": [...]}) in your JSON.

  6. Verify the Vega-Lite JSON specification maps correctly to the field names in your query.

    Screenshot showing a heatmap in the Vega component along with the JSON code used.

Vega component limitations

  • One-way filtering: While all View and Knowledge Model filters are respected, bi-directional filtering where you click the component to filter the rest of the View is not yet supported.

  • Basic mapping: Advanced tile-based features like zooming and panning are not supported as the component currently uses Vega’s integrated vector maps.

  •  Input variables: Input variables in PQL queries are not currently supported.

  • Tooltip styling: Custom styling like using specific fonts/colors is not currently supported.