Add Price Line - Lightweight Charts

A price line is a horizontal line drawn across the width of the chart at a specific price value. This example shows how to add price lines to your chart.

Short answer

A price line can be added to a chart by using the createPriceLine method on an existing series (ISeriesApi) instance.

const myPriceLine = {
    price: 1234,
    color: '#3179F5',
    lineWidth: 2,
    lineStyle: 2, // LineStyle.Dashed
    axisLabelVisible: true,
    title: 'my label',
};

series.createPriceLine(myPriceLine);

You can see a full working example below.

Tips

You may wish to disable the default price line drawn by Lightweight Charts™ for the last value in the series (and it's label). You can do this by adjusting the series options as follows:

series.applyOptions({
    lastValueVisible: false,
    priceLineVisible: false,
});

Resources

You can view the related APIs here:

createPriceLine - Method to create a new Price Line.
PriceLineOptions - Price Line options.
LineStyle - Available line styles.

Full example

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