Add Series Markers - Lightweight Charts

A series marker is an annotation which can be drawn on the chart at a specific point. It can be used to draw attention to specific events within the data set. This example shows how to add series markers to your chart.

Short answer

You can add markers to a series by passing an array of seriesMarker objects to the createSeriesMarkers method on an ISeriesApi instance.

const markers = [
    {
        time: { year: 2018, month: 12, day: 23 },
        position: 'aboveBar',
        color: '#f68410',
        shape: 'circle',
        text: 'A',
    },
];
createSeriesMarkers(series, markers);

You can see a full working example below.

Further information

A series marker is an annotation which can be attached to a specific data point within a series. We don't need to specify a vertical price value but rather only the time property since the marker will determine it's vertical position from the data points values (such as high and low in the case of candlestick data) and the specified position property (SeriesMarkerPosition).

Resources

You can view the related APIs here:

SeriesMarker - Series Marker interface.
SeriesMarkerPosition - Positions that can be set for the marker.
SeriesMarkerShape - Shapes that can be set for the marker.
createSeriesMarkers - Method for adding markers to a series.
Time Types - Different time formats available to use.

Full example

import UsageGuidePartial from "../_usage-guide-partial.mdx"; import CodeBlock from "@theme/CodeBlock"; import code from "!!raw-loader!./series-markers.js";