SciChart.js v2.x or above now features a new API: The PointMetadata API. This allows you to store any additional kind of data to some or all x,y points in a data series.
This metadata can be used to:
- Trade selected data points (see DataPoint Selection)
- Change the stroke and fill and point-marker colours using a PaletteProvider
- Display additional data in tooltips for CursorModifier and RolloverModifier, or generally as a result of any Hit-Test operation.
Adding Metadata to Series
Metadata is optional and can be set when a dataseries is first created, or whenever data is added or updated. The add, insert and update methods on a dataseries take an optional metadata parameter.
All metadata must implement the IPointMetadata interface, ie { isSelected: boolean }. Beyond that it can contain any kind of data, and even functions.
See the example below for how to create metadata when constructing an XyDataSeries and later when appending, inserting or updating that dataseries.
Note: You do not have to set metadata on every point. The structure of the metadata does not have to be the same for every point.
Metadata Templates
If you just need to set the same metadata on every point, you can supply a single metadata object and it will be used as a template and be cloned onto each datapoint. For example:
Metadata Generators
If you want to set complex metadata using the Builder Api you have the option to take control of how the metadata is deserialized and serialized by passing a MetadataGenerator. This is a class that should accept raw data in its constructor and have a getMetadata method that returns a metadata array.
Before this class can be used with the builder api it must be registered. Then, it can be used like this:
Using Metadata to Colour Datapoints
SciChart.js features a powerful API - the PaletteProvider API - which allows you to individually colour line or mountain series segments, pointmarkers or candles / columns.
Metadata can be used as an input if you wanted to control series colour based on a custom object.
This example nelow uses metadata to drive line color explicitly.
This example produces the following chart:
Using Metadata in Modifier Tooltips
Using the ChartModifier API you can add tooltips and cursors to a SciChartSurface. See the documentation for RolloverModifier and CursorModifier for two ways to do this.
Maybe you want certain property from Metadata to appear in tooltips. If so, you can use some code like this:
The above example produces this chart.
Retrieving Metadata during Hit-Test (on Mouse Click)