amcharts Candlestick customise the up and down colors of the candles

21 views Asked by At

I am stuck trying to change the colors of my candlesticks I want to have a darker version of green / red but just incase i was being color blind i threw in a grey color just to make it more noticeable. I have not been able to get it to change the colors at all though.

I have made a theme

class MyTheme extends am5.Theme {
            setupDefaultRules() {
                this.rule("Candlestick", ["custom-candlestick"]).setAll({
                    upColor: am5.color(0x777777), 
                    downColor: am5.color(0x00FF00),
                });                
                this.rule("Label").setAll({
                    fontSize: 10,
                    fill: am5.color(0x777777)
                });
            }
        }

and then tried to apply the theme but have had no luck anyone have any ideas?

let valueSeries = mainPanel.series.push(am5xy.CandlestickSeries.new(root, {
            name: ticker,
            clustered: false,
            valueXField: "date",
            valueYField: "close",
            highValueYField: "high",
            lowValueYField: "low",
            openValueYField: "open",
            calculateAggregates: true,
            xAxis: dateAxis,
            yAxis: valueAxis,
            legendValueText: "open: [bold]{openValueY}[/] high: [bold]{highValueY}[/] low: [bold]{lowValueY}[/] close: [bold]{valueY}[/]",
            legendRangeValueText: "",
            tooltip: am5.Tooltip.new(root, {
                pointerOrientation: "horizontal",
                labelText: "open: {openValueY}\nlow: {lowValueY}\nhigh: {highValueY}\nclose: {valueY}"
            }),
            themeTags: ["custom-candlestick"]
           
        }));
1

There are 1 answers

0
JPWilson On

Incase anyone has the same problem in the future i managed to alter the colors by using root.interfaceColors.set("positive", am5.color(0xff0000)); here is the relevent documentation