Search code examples
amchartsamcharts4ohlc

how to change color of candlestick based on ajax data in amcharts 4?


I want to change color of some candlestick on charts based on colors that come as a data from backend, Because I do some calculation in backend, and find some candles different than others. so how can I do that? here is a code in codepen that changes colors but by using condition related to price (Open,high,low,close) or index of candles but I want change color based on another data that calculated in backend and I send it by other data to front end.

series.columns.template.adapter.add("fill", (fill, target) => {
  if (target.dataItem) {
    if((target.dataItem.index%2==0)){
       return am4core.color("#000000");  
    }
    else {
      if(chart.data[target.dataItem.index].open > chart.data[target.dataItem.index].close){
        return am4core.color("#00FF00");  
      }else {
        return am4core.color("#FF0000");  
      }
    }

https://codepen.io/enriqu3/pen/MWYVEzW

for example assume that backend sends an value of "X" with other data(Open,high,low,close,date,X) and I want to change color of each candle based on that "X" value.


Solution

  • I found an answer:

    if(chart.data[target.dataItem.index].x > y)
            {
                return am4core.color("blue");  
            }
            else 
            {
                    if(chart.data[target.dataItem.index].open >chart.data[target.dataItem.index].close) return am4core.color("red");  
            else return am4core.color("green");  
            }