Line Chart - How to show XAxis scale value with CategoryAxis Majorticks ?

[CHIHPEI]

Quesiton1.

If I had a series of datas, with the data below

X =  {"1.1", "2.2", "3.4", "4.2", "5.3", "6.1", "7.3", "8.2", "9..1", "10.2", "11.4", "12.1"}

Y = {0.1, 3.907, 7.943, -7.3, 7.848, -1.8, 9.263, -4.2, 3.890, 8.238, 9.552, 6.855}

How can I show XAxis Scale with CategoryAxis Majorticks?

 

Quesiton2.
Extend the scenario above,

the last Value of X is 12.1, What if I would like to set the range of the scale from 0 to 20 or something else,

What should I set with the CategoryAxis?

It is like changing the max scale of XAxis dynamically, which depends on the first and the last value of the series of data.

if the first value and last value were 1.1 and 12.1, than the min and max would be -4 to 17

Min scale = first vale - 5 (round up) = -4

Max scale = last value + 5 (round up) = 17

 

Example

What I've tried on REPL

@section HeadContent {
<style>
    #chart {
        background: center no-repeat url('@Url.Content("~/shared/styles/world-map.png")')
    }
</style>
}

<div class="demo-section wide">
    @(Html.Kendo().Chart()
        .Name("chart")
        .Title("Test Setting Scale")
        .Legend(legend => legend
            .Position(ChartLegendPosition.Bottom)
        )
        .ChartArea(chartArea => chartArea
            .Background("transparent")
        )
        .SeriesDefaults(seriesDefaults =>
            seriesDefaults.Line().Style(ChartSeriesStyle.Smooth)
        )
        .Series(series => {
            series.Line(new double[] { 0.1, 3.907, 7.943, -7.3, 7.848, -1.8, 9.263, -4.2, 3.890, 8.238, 9.552, 6.855 }).Name("MyData");
        })
        .CategoryAxis(axis => axis
            .Categories("1.1", "2.2", "3.4", "4.2", "5.3", "6.1", "7.3", "8.2", "9..1", "10.2", "11.4", "12.1")
            .MajorGridLines(lines => lines.Visible(false))
            //.BaseUnit(ChartAxisBaseUnit.Fit)
            .MajorTicks(t => t.Step(1))
        )
        .ValueAxis(axis => axis
            .Numeric().Labels(labels => labels.Format("{0}%"))
            .Line(line => line.Visible(false))
            .AxisCrossingValue(-10)
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0}%")
        )
    )
</div>