Dashboard Trading

This example shows the creation of a simple trading dashboard with multiple individual charts on a single pane.

The chart contains:

Japanese candlesticks ( OHLC series ) to represent the market price data
Mountains area ( AreaRange series ) to represent the difference between high & low values
Mountains area ( Area series ) to represent the volume

Legend

Legend in this example is a UI object embedded to the chart using predefined simple builders for horizontal or vertical layout.

Horizontal legend

// Create a horizontal legend embedded to the chart.
const legend = chart.addLegendBox( LegendBoxBuilders.HorizontalLegendBox )

Vertical legend

// Create a horizontal legend embedded to the chart.
const legend = chart.addLegendBox( LegendBoxBuilders.VerticalLegendBox )

The whole chart with contained series, the whole dashboard with contained charts and series, or the series individually can be easily attached to the legend box.

Adding a chart

// Attach the chart and its series to legend.
// Creates a group with charts.
// Return attached entries.
const entries = legend.add( chart )

Adding a dashboard

// Attach the dashboard with charts with series to legend.
// Creates groups of charts with series.
// Return attached entries.
const entries = legend.add( dashboard )

Adding a series

// Attach the individual series as a group to legend.
// Creates a group from a single series.
// Return attached entry.
const entries = legend.add( series )

Dashboard Trading

Legend

API Links