Customize the color of the line itself for a line chart during extended hours.


A jsfiddle example showing how to do this can be found here:
https://jsfiddle.net/sonylnagale/uy052xsL/32/ 


(The key parts of the logic are Line 58- Line 65 within the jsfiddle)


Here is the main part of the code to review:

const stxx = new CIQ.ChartEngine({
  container: document.querySelector(".chartContainer")
});

// see spacial changes below required on update and pagination calls
// when there will be no primary series.
stxx.attachQuoteFeed(quoteFeedSimulator, {
  refreshInterval: 1
});

stxx.setPeriodicity({
  unit: "minute"
})

stxx.setMarket({
  name: "NYSE",
  market_tz: "America/New_York",
  hour_aligned: false,
  normal_daily_open: "09:00",
  normal_daily_close: "17:00",
  rules: [
    //First open up the regular trading times
    //Note that sat and sun (in this example) are always closed because
    //everything is closed by default and we didn't explicitly open them.
    { dayofweek: 1, open: "09:30", close: "16:00" }, //mon
    { dayofweek: 2, open: "09:30", close: "16:00" },
    { dayofweek: 3, open: "09:30", close: "16:00" },
    { dayofweek: 4, open: "09:30", close: "16:00" },
    { dayofweek: 5, open: "09:30", close: "16:00" }, //fri

    //After Hours premarket
    { dayofweek: 1, open: "08:00", close: "09:30", name: "pre" }, //mon
    { dayofweek: 2, open: "08:00", close: "09:30", name: "pre" },
    { dayofweek: 3, open: "08:00", close: "09:30", name: "pre" },
    { dayofweek: 4, open: "08:00", close: "09:30", name: "pre" },
    { dayofweek: 5, open: "08:00", close: "09:30", name: "pre" }, //fri

    //After Hours post
    { dayofweek: 1, open: "16:00", close: "20:00", name: "post" }, //mon
    { dayofweek: 2, open: "16:00", close: "20:00", name: "post" },
    { dayofweek: 3, open: "16:00", close: "20:00", name: "post" },
    { dayofweek: 4, open: "16:00", close: "20:00", name: "post" },
    { dayofweek: 5, open: "16:00", close: "20:00", name: "post" }, //fri
  ]
});

new CIQ.ExtendedHours({ stx: stxx, filter: true });
stxx.extendedHours.prepare(true);

stxx.chart.customChart = {
  colorFunction: (stx, quote, mode) => { 
    return (stx.chart.market.getSession(quote.DT) !== '') ? "red" : "green"; 
  },
  chartType: "extendedHoursChart"
}

stxx.setChartType("extendedHoursChart");
stxx.loadChart("AAPL");