CODEWITHSUNDEEP
javascriptjquerykendo-uikendo-asp.net-mvckendo-chart
Mark
Mark

Reputation: 4873

Kendo UI Data Vis - Bar Chart - Min/Max Y-Axis Value

I'm using Kendo UI's bar chart for some data-visualizations.

I'm trying to set a max value for the y axis, does anyone know how I could implement this?

Currently, the values appear to be generated based on the value in my graph, but my data needs to have a max and min value of 15.

Here is what is being generated.

enter image description here

My code is as follows:

  <!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/bar-charts/column">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
    <script src="http://cdn.kendostatic.com/2014.1.528/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
</head>
<body>
  <style>
    #dd {
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Opera, Chrome, and Safari */
}
  </style>
    <div id="example">
    <div class="demo-section k-content">
        <div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
    </div>
    <script>
        function createChart() {
            $("#chart").kendoChart({
                title: {
                    text: "What should I call this graph"
                },
                legend: {
                    position: "top"
                },
                seriesDefaults: {
                    type: "column"
                },
                series: [{
                    name: "XX",
                    data: [13.907]
                }, {
                    name: "XX",
                    data: [-4.743]
                }, {
                    name: "XX",
                    data: [-7.210]
                },{
                    name: "XX",
                    data: [9.988]
                }],
                valueAxis: {
                    labels: {
                        format: "#.#"
                    },
                    line: {
                        visible: false
                    },
                    axisCrossingValue: 0
                },
                categoryAxis: {
                    categories: [2013],
                    line: {
                        visible: false
                    },
                    labels: {
                        padding: {top: 165}
                    }
                },
                tooltip: {
                    visible: true,
                    format: "{0}%",
                    template: "#= series.name #: #= value #"
                }
            });
        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>
</div>


</body>
</html>

Upvotes: 0

Views: 4314

Answers (3)

Alex Mathew
Alex Mathew

Reputation: 350

valueAxis: { max: MaxValue, }

//MaxValue is variable which contain your maximum value

Upvotes: 0

Mark
Mark

Reputation: 4873

And to answer my own question...

I added modified the following code: valueAxis: { min: -15, // added this line max: 15, // added this line labels: { format: "#.#" }, line: { visible: false }, axisCrossingValue: 0 },

Upvotes: 1

hinogi
hinogi

Reputation: 36

Just add the "max: 15, min:-15" to your valueAxis. here is your example with the limits

http://trykendoui.telerik.com/EgOs

Upvotes: 2

Related Questions