Yaxis step size

1 Answer 26 Views
Chart
iliya
Top achievements
Rank 1
Veteran
iliya asked on 01 Nov 2021, 10:29 AM

Hello 

I hvae just started to use line chart and i am using demo exmple but y axis looks very bad


@using Kendo.Mvc.UI;

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

 

<div id="page-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default" style="min-height: 100px;">
                <div class="panel-body index" style="padding: 0px">
                    Todays Totals
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-2">
            <div class="panel panel-default" style="min-height: 500px;">
                <div class="panel-body index" style="padding: 0px">
                    Filters
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="panel panel-default" style="min-height: 500px;">
                <div class="panel-body index" style="padding: 0px">
                    Sales by platform
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="col-lg-12">
                <div class="panel panel-default" style="min-height: 400px;">
                    <div class="panel-body index" style="padding: 0px">
                        <div class="k-content wide">
        
                            @(Html.Kendo().Chart()
     .Name("chart1")
     .Title("Internet Users")
     .Legend(legend => legend
         .Position(ChartLegendPosition.Bottom)
     )
     .Series(series =>
     {
         series.Line(new double[] { 15.7, 16.7, 20, 23.5, 26.6 }).Name("World");
         series.Line(new double[] { 67.96, 68.93, 75, 74, 78 }).Name("United States");
     })
     .CategoryAxis(axis => axis
         .Categories("2005", "2006", "2007", "2008", "2009")
         .MajorGridLines(lines => lines.Visible(false))
     )
     .ValueAxis(axis => axis
         .Numeric().Labels(labels => labels.Format("{0}%"))
     )
)

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="panel panel-default" style="min-height: 270px;">
                    <div class="panel-body index" style="padding: 0px">
                        Grid
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


it looks like this

1 Answer, 1 is accepted

Sort by
0
Yanislav
Telerik team
answered on 01 Nov 2021, 02:15 PM

Hello,

You should try to refresh your charts, because if it is initialized inside a container, after this container is rendered the chart has to recalculate its dimensions.

Try refreshing your chart by using this snippet:

    $(document).ready(function () {
        chart = $("#chart1").data("kendoChart");
        chart.refresh();
    })


Regards,
Yanislav
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Chart
Asked by
iliya
Top achievements
Rank 1
Veteran
Answers by
Yanislav
Telerik team
Share this question
or