Hide Chart Y Axis

2 posts, 1 answers
  1. Jon
    Jon avatar
    6 posts
    Member since:
    Oct 2011

    Posted 23 Oct 2014 Link to this post

    I'm trying to eliminate the chart's y axis. I can accomplish this through CSS, but then I have a margin to eliminate. I'd rather do this through the JS, but the kendo examples weren't working in Kendo Dojo so I'm not sure of the correct way to do this.

    This is my HTML
    <span class="w50 left">"Job Name"</span>
    <span class="">
          <div id="profitChart" ></div>
    </span>

    This is my CSS to hide it (I commented this out to take the screen grab - see attached)
    /*hides sidebar of Cost Discount Profit Bar*/
    #k10000 > path:first-child, #k10000 > path:nth-child(2), #k10000 > path:nth-child(3){
        display:none !important;
    }

    This is my JS
    // Creates the Profit bar chart on Job Info screen
    function createChart() {
        $("#profitChart").kendoChart({
            chartArea: {
                height: 80,
                margin: {
                    top:5,
                    bottom:5
                }
            },
            //title: {
            //    text: "Job Name"
            //},
            legend: {
                visible: true,
                position: "bottom",
                labels: {
                  font: "20px sans-serif",
                }
            },
            seriesDefaults: {
                type: "bar",
                stack: {
                    type: "100%"
                }
            },
            series: [{
                name: "Cost",
                data: [50],
                color: "#3498db"
            },  {
                name: "Discount",
                data: [10],
                color: "#FFA500"
            }, {
                name: "Profit",
                data: [40],
                color: "#61B329"
            }],
             
            valueAxis: {
                visible: false,
                majorGridLines: {
                    visible: false
                },
                minorGridLines: {
                    visible: false
                }
            },
             
            categoryAxis: {
                categories: [],
                majorGridLines: {
                    visible: false
                },
                minorGridLines: {
                  visible: false
                },
            },
            tooltip: {
                visible: false,
                template: "#= series.name #: #= value #"
            },
            panes: [
            { height: 50 }]
        });
    }
     
    $(document).ready(createChart);
    $(document).bind("kendo:skinChange", createChart);
  2. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 28 Oct 2014 Link to this post

    Hi Jon,

    You can achieve the expected result as setting categoryAxis.visible option to false
    $("#profitChart").kendoChart({
      //....
      categoryAxis: {
         visible: false,
         //....
      }
    });

    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