Home › forums › Using CanvasJS › Changing Candlestick Color Based on Previous Close
I love CanvasJS. However I’d like to get the Candlestick chart to look more like a traditional candlestick chart. In a traditional chart, the color of the candle is dependent on the previous close. If the current close is less than the previous close, the color is red. If the current close is greater than the previous close, the color is green (or black).
If the current close is greater than the open, then it is filled with white which is how CanvasJS is by default, and if close is less than open, then it’s filled with whatever color the candlestick is.
So here’s my problem: risingColor and fallingColor look at the close vs. open price.
But let’s take the case where the current close is greater than the previous close, but the current close is less than the current open. It should be a green filled-in candle: green because close is greater than previous close, and filled in because the close is less than open.
If I set the color attribute of the datapoint, it sets the outline color, but I can’t set the inside color, or at least don’t know how. fallingColor would change that but that can only be set on the data series level, not for each datapoint.
Is what I want possible?
By the way, here is a jsfiddle I created showing what’s happening vs what I want to happen. Hope it is clear.
fallingColor and risingColor are only available at dataSeries level. You can loop through the dataPoints and set color for each of the dataPoints based on your requirements as shown in this JSFiddle.
You must be logged in to reply to this topic.