)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

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

Platform: jQuery |
Control: ejChart |
Published Date: July 21, 2015 |
Last Revised Date: July 1, 2019

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.

Before bear fill and bull fill color changing

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.

After bear fill and bull fill color changing

Figure 2: Chart after changing the bearFillColor and bullFillColor

JS Playground sample link: BearFillColor and BullFillColor

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon