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 candleTheme CandleTheme upColor string downColor string noneColor string upWickColor string downWickColor string noneWickColor string borderOpacity number activeCandleTheme CandleTheme barTheme LineStyleTheme upColor string downColor string noneColor string lineTheme LineStyleTheme areaTheme AreaStyleTheme lineColor string startColor string stopColor string chartAreaTheme ChartAreaTheme backgroundMode "regular" | "gradient" backgroundColor string backgroundGradientTopColor string backgroundGradientBottomColor string gridColor string scatterPlot ScatterPlotStyle mainColor string baseLineTheme BaselineStyleTheme upperSectionStrokeColor string lowerSectionStrokeColor string upperSectionFillColor string lowerSectionFillColor string baselineColor string histogram HistogramColors upCap string upBottom string upBright string downCap string downBottom string downBright string noneCap string noneBottom string noneBright string highlights Record<"AFTER_MARKET" | "PRE_MARKET" | "NO_TRADING" | "REGULAR", HighlightsColors> volume VolumeColors downCapColor string upCapColor string noneCapColor string downBarColor string upBarColor string noneBarColor string secondaryChartTheme SecondaryChartTheme[] waterMarkTheme FullChartColors_waterMarkTheme highLowTheme FullChartColors_highLowTheme yAxis FullChartColors_yAxis xAxis FullChartColors_xAxis crossTool FullChartColors_crossTool events ChartConfigComponentsEventsColors earnings EventColors line string normal string hover string color string dividends EventColors splits EventColors conference-calls EventColors navigationMap FullChartColors_navigationMap instrumentInfo FullChartColors_instrumentInfo paneResizer FullChartColors_paneResizer labels YAxisLabelsColors lastPrice YAxisLastPriceLabelColorConfig boxSelected string boxPositive string boxNegative string textSelected string textNegative string textPositive string bidAsk YAxisBidAskLabelColorConfig bid YAxisLabelColorConfig boxColor string textColor string descriptionText string descriptionTextColor string ask YAxisLabelColorConfig highLow YAxisHighLowLabelColorConfig high YAxisLabelColorConfig low YAxisLabelColorConfig prePostMarket YAxisPrePostMarketLabelColorConfig pre YAxisLabelColorConfig post YAxisLabelColorConfig prevDayClose YAxisLabelColorConfig