How do I dynamically change the title of the x and y axis dynamically with data from MVC controller?

Index.cshtml look like this,

<div class="chart-wrapper">
@(Html.Kendo().Chart(Model)
    .Name("chart")
    .Title("Price-Performance Ratio")
    .Legend(legend => legend
        .Visible(true)
        .Position(ChartLegendPosition.Bottom)
    )
    .Series(series =>
    {
        series.Scatter(model => model.Price, model => model.Performance)
            .Name("Price Performance");
    })
    .XAxis(x => x
        .Numeric()
        .Title(title => title.Text("Price"))
        .Labels(labels => labels.Format("R{0}")).Max(30)
    )
    .YAxis(y => y
        .Numeric()
        .Title(title => title.Text("Performance Ratio"))
        .Labels(labels => labels.Format("{0}%")).Max(10)
    )
    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Template("#= '<b>$' + value.x + ' / ' + dataItem.Family + ' ' + dataItem.Model + ': ' + value.y + '%</b>' #")
    )
    .ChartArea( size => size.Height(520))
)

The index action in the homecontroller looks like this

var model = new List<PricePerformance>(){
       new PricePerformance(){
            Price = 14.4,
            Performance = 5.4
      },
      new PricePerformance(){
            Price = 21.4,
            Performance = 2
      },
      new PricePerformance(){
            Price = 8.4,
            Performance = 1.4
      }
};

return View(model);

The Model looks like this

public class PricePerformance
{
     public double Price { get; set; }
     public double Performance { get; set; }
     public string LabelX { 
        get { return "Price"; } 
    }
    public string LabelY {
        get { return "Performance";} 
    }
}

Related posts

Recent Viewed