What is the use of bearFillColor and bullFillColor properties in financial charts?

Financial Charts are a staple of analytical reports in the financial world. Financial data for stock price charts should include high, low, open, and close prices for a day. By default, Essential Chart fills a data point with red color when the close price is less than the open price value and fills with green color when the close price is higher than the open price. In general, red color data point indicates decrease in price and green color indicates increase in price.

You can customize the default fill color used to indicate increase or decrease in price by using the properties, bearFillColor and bullFillColor. The color used in bearFillColor property represents increase in stock price and the bullFillColor property represents decrease in stock price. The following code example illustrates this.

JS

$("#container").ejChart({
    series: [{
        type: 'candle',
        points: [
            { x: new Date(1950, 1, 12), high: 125, low: 70, open: 115, close: 90 },
            { x: new Date(1953, 1, 12), high: 150, low: 60, open: 120, close: 70 },
            { x: new Date(1956, 1, 12), high: 200, low: 140, open: 160, close: 190 },
            { x: new Date(1959, 1, 12), high: 160, low: 90, open: 140, close: 110 },
            { x: new Date(1962, 1, 12), high: 200, low: 100, open: 180, close: 120 },
            { x: new Date(1965, 1, 12), high: 100, low: 45, open: 70, close: 50 },
            { x: new Date(1968, 1, 12), high: 150, low: 70, open: 140, close: 130 }
            . . . . .
            . . . . .
        ],
        bearFillColor: 'blue',
        bullFillColor: 'brown'
    }],
});

Chart before changing the bearFillColor and bullFillColor properties. Red color indicates decrease in price and green color indicates increase in price.

Figure 1: Chart before changing the bearFillColor and bullFillColor properties

Chart after changing the bearFillColor to blue and bullFillColor to brown. Brown color represents decrease in price and blue color represents increase in price.

Figure 2: Chart after changing the bearFillColor and bullFillColor

JS Playground sample link: BearFillColor and BullFillColor