msturges
Posts: 2
Joined: Wed Oct 04, 2023 6:52 pm

series candle stick

I am trying to style the candle stick red or green based on the previous day close price. I can style the color key but I can't figure out how to style line correctly.

The data looks like this

Code: Select all

// OHLC stands for:
import { TimeSeriesDaily } from "@prisma/client";

export type OHLCEntry = [
  timestamp: number,
  open: number,
  high: number,
  low: number,
  close: number,
  candleStickColor: string,
];

export const transformOHLCData = (data: TimeSeriesDaily[]): OHLCEntry[] => {
  return data.map((item, index): OHLCEntry => {
    // Default color to 'green' for the first item as there's no previous day to compare with
    let candleStickColor = "green";
    if (index > 0) {
      const previousClose = data[index - 1]?.close ?? 0;
      candleStickColor = item.close > previousClose ? "green" : "red";
    }
    return [
      item.date ? new Date(item.date).getTime() : 0,
      item.open,
      item.high,
      item.low,
      item.close,
      candleStickColor,
    ];
  });
};

and then in my series I am doing this

Code: Select all

     type: "candlestick",
        name: `${title} Price`,
        data: indicatorData.ohlcData,
        yAxis: "ohlc",
        //
        keys: ["x", "open", "high", "low", "close", "color"], // Add 'color' to keys
        colorKey: "color", 
But the line around the candle stick is still the wrong color and I cant use

Code: Select all

 upLineColor: "green",
        lineColor: "red",
since this is going to use the default behavior and not respect the

Code: Select all

 keys: ["x", "open", "high", "low", "close", "color"], // Add 'color' to keys
        colorKey: "color",
jakub.s
Posts: 1218
Joined: Fri Dec 16, 2022 11:45 am

Re: series candle stick

Hi,

Welcome to our forum & thanks for the question!

I've created a simple candlestick example where I've set different colors for the "up" and "down" sticks: https://jsfiddle.net/BlackLabel/jedubnLa/

If this does not work for you, please try to reproduce your issue and share a minimal reproducible example in a form of an online demo (like the one that I've included) here so I could take a look and investigate this further.

Best regards!
Jakub
Highcharts Developer

Return to “Highcharts Stock”