Set static axis values and changing bar colors

[Alexander]

Hi I have a project (which we are using Kendo on in evaluation for purchasing dev licensing) that I want my axis values to be 0%-100%. I have tried changing the numeric labels but all I seem to be doing is changing formatting and not the actual range. I have read through the documentation and haven't found a place where the is set except for the stock type charts with the crossover axis information. I also want to make it to where if a bar in a series is above a certain level it is a different color. This forum hinted that the feature was coming http://www.kendoui.com/forums/dataviz/chart/chart-color.aspx but didn't make it clear that it landed for MVC as I don't want separate series. For instance anything above 85% would be green and anything below would be red.

Here is the code for my chart:

<div class="chart-wrapper">

    @(Html.Kendo().Chart()

        .Theme("metro")

        .Name("satisfactionChart")

        .Title("Customer Satisfaction")

         

        .Legend(legend => legend

            .Position(ChartLegendPosition.Bottom)

        )

        .Series(series => {

            series.Bar(new double[] { 94, 82, 89, 95, 90, 80, 91 }).Name("Key Performance Metrics").Color("#00CD00");

        })

         

        .CategoryAxis(axis => axis

            .Categories("Ease of requesting help", "Time to reach qualified technician", "Time to provide a solution", "Completeness of solution", "Technical ability & product knowledge", "How well we kept you informed", "Overall opinion of service")

        )

 

        .ValueAxis(axis => axis

            .Numeric().Labels(labels => labels.Format(""))

            .PlotBands(plotBands => plotBands

            .Add().From(86).To(95).Opacity(.3).Color("Grey")

            )

        )  

          

        .Tooltip(tooltip => tooltip

            .Visible(true)

            .Format("{0}%")

        )

    )

</div>

I would really appreciate help with this. Thanks.

[Iliana Dyankova]

Hi Alexander,

You  can specify the axis range in Kendo UI Chart as set min and max options. For example: 

@(Html.Kendo().Chart()
  //....
 .ValueAxis(axis => axis
    //....
    .Min(0)
    .Max(100)
 )
)

As for the colors, as Tsvetormir pointed the color of each point can be specified through "colorField" configuration option. For a working example please check this online demo (keep in mind that Kendo UI online demos represent only the View, while all controllers and models can be found in the offline demos from the distribution package).

Kind regards,
Iliana Nikolova
the Telerik team