how to customise color of bars in stock chart

[Jeffry]

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"
        }
    }
});

[Iliana Dyankova]

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

[Jeffry]

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!

[Iliana Dyankova]

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