Data Columns are taller than entire chart.

[Scott]

Hello, when I use the code below, the bars are taller than the chart.  Also, the labels on the left are really small numbers?  Any help?

01.jQuery(function () {
02.       jQuery("#salesgraph").kendoChart({
03.           "title": {"text": "Sales by Category"},
04.           "legend": {"visible": true},
05.           "valueAxis": [
06.           {"labels":
07.           {"template": "#=kendo.toString(value, 'c')#"},
08.               "line": {"visible": false}
09.           }
10.       ], "categoryAxis": [
11.           {"categories": ["Foosackly's #1", "Foosackly's #2", "Foosackly's #3", "Foosackly's #4"], "majorGridLines": {"visible": false}}
12.       ], "tooltip": {"visible": true, "template": "#= series.name# = $#=kendo.toString(value, 'c')#"},
13.           "seriesColors": ["#cd1533", "#B5A6F3", "#dc5c71", "#e47f8f", "#eba1ad", "#009bd7", "#26aadd", "#4db9e3", "#73c8e9", "#99d7ef"],
14.           "seriesDefaults": {"type": "column"},
15.           "series": [
16.           {"name": "Default Category", "stack": "Sales", "data": ["20636.970000", "598.380000", "8691.860000", "751.250000"]},
17.           {"name": "Box", "stack": "Sales", "data": ["57722.230000", "43723.010000", "31335.000000", "42466.370000"]},
18.           {"name": "Sandwiches", "stack": "Sales", "data": ["5904.700000", "4027.600000", "3256.800000", "4352.870000"]},
19.           {"name": "Salads", "stack": "Sales", "data": ["17934.920000", "16076.740000", "12776.440000", "12584.570000"]},
20.           {"name": "Snacks", "stack": "Sales", "data": ['0','0','0','0']},
21.           {"name": "20 oz Drinks", "stack": "Sales", "data": ["12507.670000", "8870.100000", "4937.600000", "10333.810000"]},
22.           {"name": "32 oz Dinks", "stack": "Sales", "data": ["3334.850000", "3007.320000", "2722.540000", "2644.120000"]},
23.           {"name": "Catering", "stack": "Sales", "data": ["1495.720000", "624.800000", "725.070000", "1339.400000"]},
24.           {"name": "Sacks", "stack": "Sales", "data": ["6548.720000", "2990.750000", "3359.930000", "4864.500000"]},
25.           {"name": "Bigger Boxes", "stack": "Sales", "data": ["27221.620000", "17902.450000", "14814.600000", "19666.630000"]},
26.           {"name": "3 Finger Snacks", "stack": "Sales", "data": ["12320.510000", "8707.950000", "5700.500000", "8894.630000"]},
27.           {"name": "Free Snacks", "stack": "Sales", "data": ["1.320000", "1.750000", "1.040000", "2.340000"]}
28.       ]});
29.   });

[Iliana Dyankova]

Hello Scott, 

The issue is caused by passing the values as strings, while the Chart expects numbers. For your convenience I modified the data and prepared a simple jsBin example. 

Regards,
Iliana Nikolova
the Telerik team