This page provides an example of how to use the custom chart component in your App Builder apps.

The basic workflow for creating a custom chart is as follows:

1. Create or choose a query that contains the data you want to graph.
2. Add the custom chart component and choose a chart style from the App Builder UI or the Vega-Lite example gallery.
3. Replace the values in the example with your query data.

Example setup flow

The following example shows how to create a histogram chart illustrating Datadog Logs grouped by service.

Set up your data source

1. Click + New Query.
2. Search for “search logs” and choose the Datadog Search logs action to create a query called searchLogs0.
3. Choose an existing Datadog Account Connection, or create a new one.
4. Under Inputs, for Time period, choose Past 2 Days.
5. Click Run.
   A panel displays the outputs of your query in the bottom-left.
6. Under logs, expand 0, then expand content. This shows the available properties for each log.

Add the custom chart component and choose a chart style

1. Click + All Components and select Custom Chart to add a component called customChart0.

2. Click Show Chart Examples.

3. Select Simple Histogram and click Confirm.
   The following value populates in the Vega Specification:

   ${{
       "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
       "data": {
           "url": "https://vega.github.io/editor/data/movies.json"
       },
       "mark": {
           "type": "bar",
           "tooltip": true
       },
       "encoding": {
           "x": {
               "bin": true,
               "field": "IMDB Rating"
           },
           "y": {
               "aggregate": "count"
           }
       }
   }}

Replace example values with your data

Replace the auto-populated Vega Specification with the following to change the data source and the value being graphed on the x-axis:

${{
    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
    "data": {
        "values": searchLogs0.outputs.logs
    },
    "mark": {
        "type": "bar",
        "tooltip": true
    },
    "encoding": {
        "x": {
            "field": "content.service"
        },
        "y": {
            "aggregate": "count"
        }
    }
}}

A histogram chart with your Datadog Logs data displays.

Further reading

Additional helpful documentation, links, and articles:

ComponentsDOCUMENTATION Build AppsDOCUMENTATION

Do you have questions or feedback? Join the #app-builder channel on the Datadog Community Slack.