Set Column Height to Always Take Up 100% of it's Container

2 posts, 0 answers
  1. Randy
    Randy avatar
    40 posts
    Member since:
    Nov 2007

    Posted 20 Jun 2013 Link to this post

    Hello,

    I'm working on styling a stacked bar chart and I want the chart to always take up 100% of it's containers height no matter what the data values are.  I will be binding local json data to this chart so obviously the values will change.    I wasn't sure if there was a way to set the valueAxis max property to do this?  Any help is appreciated!

    <!DOCTYPE html>
    <head>

    <link rel="stylesheet" type="text/css" href="../css/kendo/kendo.common.min.css">
    <link rel="stylesheet" type="text/css" href="../css/kendo/kendo.default.min.css">

    </head>
    <body>


     <div id="example" class="k-content" >
                <div class="chart-wrapper">
                    <div id="chart"></div>
                 </div>
    </div>


    <script src="../JavaScriptLib/jquery/main.js"></script> 
    <script src="../JavaScriptLib/kendo/kendo.all.min.js"></script>

    <script>

    function createChart() {
                        $("#chart").kendoChart({
    chartArea: {
    background:"",
    height:180,
    width:70
    },

                          legend: {
                                visible: false,

    },
                            seriesDefaults: {
                                type: "column",
    stack: true,
    gap:0
    },

    series: [{
    name: "Interest",
                                stack: "Mortgage",
                                data: [494.50],
    color: "#f58025"
                            }, {
                                name: "Taxes",
                                stack: "Mortgage",
                                data: [375],
    color: "#f58025"
                            }, {
                                name: "Principle",
                                stack: "Mortgage",
                                data: [269],
    color: "#f58025"
                            }, {
                                name: "PMI",
                                stack: "Mortgage",
                                data: [200],
    color: "#f58025"
                            }, {
                                name: "Rollover",
                                stack: "Mortgage",
                                data: [75],
    color: "#f58025"
                          
                             }, {
                                name: "Insurance",
                                stack: "Mortgage",
                                data: [50],
    color: "#f58025"
    }],

                  
                            valueAxis: {
    max:1450,
    color:"#ff0000",


    labels:{
    color:""
    },

    labels:{
    visible:false
    },
                                line: {
                                    visible: false
                                },
    majorGridLines: {
                                    visible: false
                                },

                            },
                            categoryAxis: {
    color:"",
    majorGridLines: {
                                    visible: false
                                }
    },
                            tooltip: {
                                visible: true,
                                template: "#= series.name #: #= ['$']+value #"
                            }
                        });
                    }



    $(document).ready(function(){
    $('#LoanActivityTable').dataTable();

    setTimeout(function() {
                            // Initialize the chart with a delay to make sure
                            // the initial animation is visible
                            createChart();



                            $("#example").bind("kendo:skinChange", function(e) {
                                chart.options.series[0].color = chart.options.series[0].data[0].color;
    createChart();
                            });
                        }, 400);

    });

    </script>
    </body>
    </html>
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 24 Jun 2013 Link to this post

    Hello Randy,

    I am afraid there is no a built-in option for your scenario in Kendo UI Chart. As a possible workaround I can suggest you changing the valueAxis.max value via chart.options and refresh the chart. For example: 

    //get reference to the chart widget
    var chart = $("#chart").data("kendoChart");
    //get the chart option
    var chartOptions = chart.options;
    //set new valueAxis.max
    chartOptions.valueAxis.max = 1000;
    //refresh the chart
    chart.refresh();

    Let me know if this fits your requirements. 

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top