Pre loader

Chart Legends API

JavaScript Chart - Examples

SciChart.js ships with over 80 JavaScript Chart demos which you can browse, view the source code and see related documentation. Build incredible complex dashboards with SciChart.js, our High Performance JavaScript Chart Library.

Getting Started

Demonstrates how to add a legend to a JavaScript Chart using SciChart.js, High Performance JavaScript Charts

Demonstrates how to add a Legend to a JavaScript Line Chart using SciChart.js. The legend is created when you add a LegendModifier type to the sciChartSurface.chartModifiers collection.

Legends may be placed in the top left, top right, bottom left and bottom right of the chart, and can be oriented horizontally or vertically. Each legend item takes its text from the dataSeriesName property

Tips
There are many different configurations for the legend, including fine grained control over the legend rows. Please review the API documentation below carefully for further information.

JavaScript Chart Examples

2D Charts

Chart Legends

3D Charts
Featured Apps
What's New

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies