Skip to main content

Styling colors

You can customize the chart's color palette during initialization or dynamically through the API.

Set colors on initialization​

export const changeColors = () => {
    const config: PartialChartConfig = {
        colors: {
            /* <your colors here> */
        },
    };
    const element: HTMLElement = document.createElement('div');
    const chart = new Chart(element, config);
    return chart;
}

Update colors via API​

export const setColors = () => {
    const colors = {
        /* <your colors here> */
    };
    const element: HTMLElement = document.createElement('div');
    const chart = new Chart(element);
    chart.setColors(colors);
    return chart;
}

Color configuration reference​

The colors object defines the full chart color schema:

FullChartColors

Property
Description
Type
candleTheme
CandleTheme   +
activeCandleTheme
CandleTheme   +
barTheme
LineStyleTheme   +
lineTheme
LineStyleTheme   +
areaTheme
AreaStyleTheme   +
chartAreaTheme
ChartAreaTheme   +
scatterPlot
ScatterPlotStyle   +
baseLineTheme
BaselineStyleTheme   +
histogram
HistogramColors   +
highlights
Record<"AFTER_MARKET" | "PRE_MARKET" | "NO_TRADING" | "REGULAR", HighlightsColors>
volume
VolumeColors   +
secondaryChartTheme
SecondaryChartTheme[]
waterMarkTheme
{ firstRowColor: string; secondRowColor: string; thirdRowColor: string; }
highLowTheme
{ highColor: string; lowColor: string; }
yAxis
{ backgroundColor: string; zeroPercentLine: string; labelTextColor: string; labelInvertedTextColor: string; labelBoxColor: string; rectLabelTextColor: string; rectLabelInvertedTextColor: string; }
xAxis
{ backgroundColor: string; labelTextColor: string; }
crossTool
{ lineColor: string; labelBoxColor: string; labelTextColor: string; }
events
ChartConfigComponentsEventsColors   +
navigationMap
{ buttonColor: string; knotColor: string; sliderColor: string; backgroundColor: string; buttonArrowColor: string; knotLineColor: string; knotBorderColor: string; timeLabelsTextColor: string; mapFillColor: string; mapGradientTopColor?: string; mapGradientBottomColor?: string; mapColor: string; }
instrumentInfo
{ textColor: string; }
paneResizer
{ lineColor: string; bgColor: string; bgHoverColor: string; }
labels
YAxisLabelsColors   +