Data Columns are taller than entire chart.

2 posts, 0 answers
  1. Scott
    Scott avatar
    3 posts
    Member since:
    Jul 2012

    Posted 17 Apr 2013 Link to this post

    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.   });
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 18 Apr 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top