Amcharts 5 stock chart - how to color candles based on position string uploaded in data

91 views Asked by At

Attempting to color stock candles based on "inTrade" string included in data. Three states "Long", "Short", "None". Began working with Amcharts 5 "Stock Chart Comparing Prices" demo which now incorporates two data files. One which is 5 days of historical data (15 minute candles) and one which is "live" data within the current 15 minute candle uploaded every 10 seconds.

Historical data format ..

window["Live_minute"] = [ {Date:1680631200000,Open:164.565,High:164.603,Low:164.51,Close:164.598,inTrade:"Short"}, ... ]

Live data file format {"Date":1681318800000,"Open":166.27,"High":166.364,"Low":166.23,"Close":166.347,"inTrade":"Long"}

Tried disabling value dependent coloring and setting up quick theme with no effect.

The string in the data file is formatted correctly ... Note "position" in legend text

I did try and was able to achieve desired result with Amcharts 4, however I used numeric values (ie "1" represented Long, -1 Short, 0 None) instead of string.

// AMCHARTS 4 PROCEEDURE

delete series.riseFromOpenState.properties.fill;
delete series.dropFromOpenState.properties.fill;
series.columns.template.adapter.add("fill", function(fill, target) {
  if (target.dataItem && (target.dataItem.customValue < 0)) {
    return am4core.color("#FF0000");
  }
  else
  if (target.dataItem && (target.dataItem.customValue > 0)) {
    return am4core.color("#0094FF");
  }
  else
  if (target.dataItem && (target.dataItem.customValue === 0)) {
    return am4core.color("#C6C6C6");
  }
});

I would much rather learn how to do this in Amcharts 5, any help would be greatly appreciated.

1

There are 1 answers

0
John Doe On

For amCharts 5 you can do something like this

series.columns.template.adapters.add("fill", function(fill, target) {
  if (target.dataItem.get("valueY") < 1000) {
    return am5.color(0xff621f);
  }
  else {
    return fill;
  }
});

See here