Skip to main content
Version: Unreleased

Build New Chart

This document provides guidance for building new custom charts from scratch using the ES (ElasticSearch) Builder or Prometheus Query Builder.

Accessing the Builder​

To access the chart builder:

  1. Navigate to your custom dashboard
  2. Click "Add your first chart" or "+ Add chart" button
  3. The Catalog drawer opens
  4. Switch to the "Build new" tab

Chart Builder Features​

Two Builder Types​

The "Build new" tab provides two builder interfaces:

  1. ES Builder - Build charts from ElasticSearch-indexed data
  2. Prometheus Query Builder - Build charts from Prometheus metrics

Common Features​

Both builders share these features:

  • Real-time preview - See chart rendering as you configure
  • Validation - Automatic validation of required fields
  • Validation states - Clear feedback on invalid configurations
  • Error handling - User-friendly error messages and recovery options

Builder Live Preview​

Filename: assets/builder-preview.png

What it shows: The builder with a valid configuration and live preview pane showing sample data

How to capture:

  1. Click "Add your first chart" or "+ Add chart"
  2. Switch to "Build new" tab
  3. Select a valid data stream (e.g., Calls)
  4. Select a valid metric (e.g., count, sum)
  5. Enter a chart title (required)
  6. Choose a visualization type
  7. The preview pane at the bottom automatically updates with sample data
  8. Capture showing the builder form and preview pane

Expected result:

  • Builder form shows completed fields
  • Validation indicates all fields are valid
  • "Add to dashboard" button is enabled
  • Preview pane shows chart rendering with sample data
  • Chart grid, axes, legend visible in preview