JavaScript Trading Dashboard

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 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 vertical 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.
  const entries = legend.add(chart)

• Adding a dashboard

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

• Adding a series

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