This is a migrated thread and some comments may be shown as answers.

how to customise color of bars in stock chart

3 Answers 54 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Jeffry
Top achievements
Rank 1
Jeffry asked on 16 Jan 2014, 05:16 AM
well i guess the title says it all
right now the default is orange - id like to change each stock column to a diff color

i tried putting it in the data, (ie in this case wData)
but that didnt work
pls help
thanks!

$J($chartD).kendoStockChart({
    dataSource: wData,
    series: [{
        type: "candlestick",
        openField: "open",
        closeField: "close",
        highField: "high",
        lowField: "low",
        categoryField: "cat",
 
        notes:{
            line: {
                width: 0,
                length: 0
            },
            label: {
                font: "bold 9px Open Sans, sans-serif"
            },
            icon: {
                border: {
                    width: 0
                }
            }
        },
 
        tooltip:{
            format: "{4}:<br /> {0:n0} -- {3:n0}"
        }
    }],
    navigator:{
        visible: false
    },
    categoryAxis:{
        categories: cats,
        type: "category",
        labels: {
            font: "bold 9px Open Sans, sans-serif",
            rotation: 90,
            step: 1,
            skip: 0
        }
    },
    valueAxis: {
        labels: {
            format: "N0"
        }
    }
});

3 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 16 Jan 2014, 08:26 AM
Hello Jeffry,

In order to set different colors to each of the bars you should use series.colorField and series.downColorField options:
$("#stock-chart").kendoStockChart({
  //....
  series: [{
    //....
    colorField: "color",
    downColorField: "downColor"
  }]
});

Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jeffry
Top achievements
Rank 1
answered on 17 Jan 2014, 12:51 AM
hey iliana
thx for your reply

code has been amended to this:
$J($chartD).kendoStockChart({
    dataSource: wData,
    series: [{
        type: "candlestick",
        openField: "open",
        closeField: "close",
        highField: "high",
        lowField: "low",
        categoryField: "cat",
        colorField: "color",
 
        notes:{
            line: {
                width: 0,
                length: 0
            },
            label: {
                font: "bold 9px Open Sans, sans-serif"
            },
            icon: {
                border: {
                    width: 0
                }
            }
        },
 
        tooltip:{
            format: "{4}:<br /> {0:n0} -> {3:n0}"
        }
    }],
    navigator:{
        visible: false
    },
    categoryAxis:{
        categories: cats,
        type: "category",
        labels: {
            font: "bold 9px Open Sans, sans-serif",
            rotation: 90,
            step: 1,
            skip: 0
        }
    },
    valueAxis: {
        labels: {
            format: "N0"
        }
    }

a portion of the data looks like this (as outputted by console):
[Object, Object, Object, Object, Object, Object, Object, Object]
0: Object
cat: "2009"
close: 6831
color: "#75B5CD"
high: 6831
low: 0
noteText: 6831
open: 0
__proto__: Object
1: Object
cat: "Direct Hire"
close: 9185
color: "#4E503F"
high: 9185
low: 6831
noteText: 2354
open: 6831


however just by adding the colors im now getting a js err:
Uncaught TypeError: Object [object global] has no method 'forEach'

can you give me ideas why this is happening
thanks!







0
Iliana Nikolova
Telerik team
answered on 17 Jan 2014, 04:34 PM
Hi Jeffry,

I am not quite sure what causes the issue in your application - I tried to reproduce it using the provided configuration and the stock chart is rendered as expected. For your convenience here is my test example - please check it and let me know if I am missing something.

Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Charts
Asked by
Jeffry
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Jeffry
Top achievements
Rank 1
Share this question
or