Custom Charts

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.

Alternatively, you can use Bits AI to get started with a custom chart:

1. Click the Build with AI icon ().
2. Enter a custom prompt, or try the prompt Can you help me create a custom chart?.

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

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

Request a personalized demo