Series types
In this article you can read a brief overview of all supported series types.
Series Customisation
Customization options for series are dependent on their specific type. Each type of series has its own set of available options, which can be found in the documentation provided for that particular series type. This means that any type of series can be customized, but the options you can apply will vary depending on the type of series you are working with.
If you'd like to change any option of a series, you could do this in different ways:
You can specify the default options while creating a series:
// change default top & bottom colors of an area series in creating time
const series = chart.addAreaSeries({
topColor: 'red',
bottomColor: 'green',
});Note that every method to create a series has an optional
options
parameter.You can use
ISeriesApi.applyOptions
method to apply other options on the fly:// updating candlestick series options on the fly
candlestickSeries.applyOptions({
upColor: 'red',
downColor: 'blue',
});
Area
- Method to create:
IChartApi.addAreaSeries
- Data format:
SingleValueData
orWhitespaceData
- Style options: a mix of
SeriesOptionsCommon
andAreaStyleOptions
An area chart is basically a colored area between the line connecting all data points and the time scale:
const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } };
const chart = createChart(document.getElementById('container'), chartOptions);
const areaSeries = chart.addAreaSeries({ lineColor: '#2962FF', topColor: '#2962FF', bottomColor: 'rgba(41, 98, 255, 0.28)' });
const data = [{ value: 0, time: 1642425322 }, { value: 8, time: 1642511722 }, { value: 10, time: 1642598122 }, { value: 20, time: 1642684522 }, { value: 3, time: 1642770922 }, { value: 43, time: 1642857322 }, { value: 41, time: 1642943722 }, { value: 43, time: 1643030122 }, { value: 56, time: 1643116522 }, { value: 46, time: 1643202922 }];
areaSeries.setData(data);
chart.timeScale().fitContent();
Bar
- Method to create:
IChartApi.addBarSeries
- Data format:
BarData
orWhitespaceData
- Style options: a mix of
SeriesOptionsCommon
andBarStyleOptions
A bar chart shows price movements in the form of bars.
Vertical line length of a bar is limited by the highest and lowest price values. Open & Close values are represented by tick marks, on the left & right hand side of the bar respectively:
const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } };
const chart = createChart(document.getElementById('container'), chartOptions);
const barSeries = chart.addBarSeries({ upColor: '#26a69a', downColor: '#ef5350' });
const data = [{ open: 10, high: 10.63, low: 9.49, close: 9.55, time: 1642427876 }, { open: 9.55, high: 10.30, low: 9.42, close: 9.94, time: 1642514276 }, { open: 9.94, high: 10.17, low: 9.92, close: 9.78, time: 1642600676 }, { open: 9.78, high: 10.59, low: 9.18, close: 9.51, time: 1642687076 }, { open: 9.51, high: 10.46, low: 9.10, close: 10.17, time: 1642773476 }, { open: 10.17, high: 10.96, low: 10.16, close: 10.47, time: 1642859876 }, { open: 10.47, high: 11.39, low: 10.40, close: 10.81, time: 1642946276 }, { open: 10.81, high: 11.60, low: 10.30, close: 10.75, time: 1643032676 }, { open: 10.75, high: 11.60, low: 10.49, close: 10.93, time: 1643119076 }, { open: 10.93, high: 11.53, low: 10.76, close: 10.96, time: 1643205476 }];
barSeries.setData(data);
chart.timeScale().fitContent();
Baseline
- Method to create:
IChartApi.addBaselineSeries
- Data format:
SingleValueData
orWhitespaceData
- Style options: a mix of
SeriesOptionsCommon
andBaselineStyleOptions
A baseline is basically two colored areas (top and bottom) between the line connecting all data points and the base value line:
const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } };
const chart = createChart(document.getElementById('container'), chartOptions);
const baselineSeries = chart.addBaselineSeries({ baseValue: { type: 'price', price: 25 }, topLineColor: 'rgba( 38, 166, 154, 1)', topFillColor1: 'rgba( 38, 166, 154, 0.28)', topFillColor2: 'rgba( 38, 166, 154, 0.05)', bottomLineColor: 'rgba( 239, 83, 80, 1)', bottomFillColor1: 'rgba( 239, 83, 80, 0.05)', bottomFillColor2: 'rgba( 239, 83, 80, 0.28)' });
const data = [{ value: 1, time: 1642425322 }, { value: 8, time: 1642511722 }, { value: 10, time: 1642598122 }, { value: 20, time: 1642684522 }, { value: 3, time: 1642770922 }, { value: 43, time: 1642857322 }, { value: 41, time: 1642943722 }, { value: 43, time: 1643030122 }, { value: 56, time: 1643116522 }, { value: 46, time: 1643202922 }];
baselineSeries.setData(data);
chart.timeScale().fitContent();
Candlestick
- Method to create:
IChartApi.addCandlestickSeries
- Data format:
CandlestickData
orWhitespaceData
- Style options: a mix of
SeriesOptionsCommon
andCandlestickStyleOptions
A candlestick chart shows price movements in the form of candlesticks. On the candlestick chart, open & close values form a solid body of a candle while wicks show high & low values for a candlestick's time interval:
const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } };
const chart = createChart(document.getElementById('container'), chartOptions);
const candlestickSeries = chart.addCandlestickSeries({ upColor: '#26a69a', downColor: '#ef5350', borderVisible: false, wickUpColor: '#26a69a', wickDownColor: '#ef5350' });
const data = [{ open: 10, high: 10.63, low: 9.49, close: 9.55, time: 1642427876 }, { open: 9.55, high: 10.30, low: 9.42, close: 9.94, time: 1642514276 }, { open: 9.94, high: 10.17, low: 9.92, close: 9.78, time: 1642600676 }, { open: 9.78, high: 10.59, low: 9.18, close: 9.51, time: 1642687076 }, { open: 9.51, high: 10.46, low: 9.10, close: 10.17, time: 1642773476 }, { open: 10.17, high: 10.96, low: 10.16, close: 10.47, time: 1642859876 }, { open: 10.47, high: 11.39, low: 10.40, close: 10.81, time: 1642946276 }, { open: 10.81, high: 11.60, low: 10.30, close: 10.75, time: 1643032676 }, { open: 10.75, high: 11.60, low: 10.49, close: 10.93, time: 1643119076 }, { open: 10.93, high: 11.53, low: 10.76, close: 10.96, time: 1643205476 }];
candlestickSeries.setData(data);
chart.timeScale().fitContent();
Histogram
- Method to create:
IChartApi.addHistogramSeries
- Data format:
HistogramData
orWhitespaceData
- Style options: a mix of
SeriesOptionsCommon
andHistogramStyleOptions
A histogram series is a graphical representation of the value distribution. Histogram creates intervals (columns) and counts how many values fall into each column:
const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } };
const chart = createChart(document.getElementById('container'), chartOptions);
const histogramSeries = chart.addHistogramSeries({ color: '#26a69a' });
const data = [{ value: 1, time: 1642425322 }, { value: 8, time: 1642511722 }, { value: 10, time: 1642598122 }, { value: 20, time: 1642684522 }, { value: 3, time: 1642770922, color: 'red' }, { value: 43, time: 1642857322 }, { value: 41, time: 1642943722, color: 'red' }, { value: 43, time: 1643030122 }, { value: 56, time: 1643116522 }, { value: 46, time: 1643202922, color: 'red' }];
histogramSeries.setData(data);
chart.timeScale().fitContent();
Line
- Method to create:
IChartApi.addLineSeries
- Data format:
LineData
orWhitespaceData
- Style options: a mix of
SeriesOptionsCommon
andLineStyleOptions
A line chart is a type of chart that displays information as series of the data points connected by straight line segments:
const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } };
const chart = createChart(document.getElementById('container'), chartOptions);
const lineSeries = chart.addLineSeries({ color: '#2962FF' });
const data = [{ value: 0, time: 1642425322 }, { value: 8, time: 1642511722 }, { value: 10, time: 1642598122 }, { value: 20, time: 1642684522 }, { value: 3, time: 1642770922 }, { value: 43, time: 1642857322 }, { value: 41, time: 1642943722 }, { value: 43, time: 1643030122 }, { value: 56, time: 1643116522 }, { value: 46, time: 1643202922 }];
lineSeries.setData(data);
chart.timeScale().fitContent();
Custom Series (Plugins)
Lightweight Charts offers the ability to add your own custom series types, also known as series plugins. This feature allows developers to extend the functionality of the library by adding new chart types, indicators, or other custom visualizations.
Custom series types can be defined by creating a class which implements the ICustomSeriesPaneView interface. This class defines the rendering code which Lightweight Charts will use to draw the series on the chart. Once a custom series type is defined, it can be added to any chart instance using the addCustomSeries()
method, and be used just like any other series.
Please see the Plugins article for more details.