ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  candlestick chart that changes background color for premarket data
Posted by dave on Nov-21-2022 04:26
I'm trying to draw a candlestick chart, but, for premarket data, I would like to change the background color to gray, so the user can tell when the market opened.

It would look something like this (a chart of AAPL that shows pre/post market trading in gray)


  Re: candlestick chart that changes background color for premarket data
Posted by Peter Kwan on Nov-21-2022 23:40
Hi Dave,

You can use Axis.addZone to add gray zones to the chart. An example of using this API is at:

For your case, the exact code depends on your programming language. For a FinanceChart, you may call Axis.addZone for the XYChart that needs to have the zones. In your attached image, only the main price chart has the zones, but not the volume chart. In this case, the code is like:

// When you add the main price chart, store the returned XYChart object
// so you can add zones to it.
XYChart c = myFinanceChart.addMainChart(.......);

// Add a grey zone
c.xAxis().addZone(startIndex, endIndex, 0x888888);

For a FinanceChart, the startIndex and endIndex are the "index" of the starting and ending position of the zone. The "index" is 0 is the first visible timestamp, 1 for the second visible timestamp, etc..

Note that in FinanceChart, some data are "extra points" in the data arrays that are used to compute indicators but them themselves visible. See:

So if the premarket data are from the 50th to 70th timestamps in your timeStamps array, then the visible index are from (50 - extraPoints) to (70 - extraPoints).

(Note: The above is in C#/Java. If you need to translate them to another programming language, please let me know.)

Best Regards
Peter Kwan