Market-Aware Line series

Sample of how to render a chart with different colors for extended hours.

by sonylnagale

HTML

<link rel="stylesheet" type="text/css" href="https://jsfiddle.chartiq.com/chart/css/stx-chart.css" media="screen" />

<div class="chartContainer" style="width:600px;height:400px;position:relative;"></div>

JavaScript

import { CIQ } from "https://jsfiddle.chartiq.com/chart/js/standard.js";
import "https://jsfiddle.chartiq.com/chart/js/addOns.js";

import quoteFeedSimulator from "https://jsfiddle.chartiq.com/chart/examples/feeds/quoteFeedSimulator.js";

// start the chart engine
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:...