This example shows the PolarChart with inverted axes. You can specify the clockwise or counter-clockwise direction of the argumentAxis by using the inverted property. Similarly, you can change the direction of the valueAxis.
@(Html.DevExtreme().PolarChart()
.ID("chart")
.DataSource(new[] {
new { arg = 0, val = 0.0 },
new { arg = 30, val = 0.87 },
new { arg = 45, val = 1.0 },
new { arg = 60, val = 0.87 },
new { arg = 90, val = 0.0 },
new { arg = 120, val = 0.87 },
new { arg = 135, val = 1.0 },
new { arg = 150, val = 0.87 },
new { arg = 180, val = 0.0 },
new { arg = 210, val = 0.87 },
new { arg = 225, val = 1.0 },
new { arg = 240, val = 0.87 },
new { arg = 270, val = 0.0 },
new { arg = 300, val = 0.87 },
new { arg = 315, val = 1.0 },
new { arg = 330, val = 0.87 },
new { arg = 360, val = 0.0 }
})
.Series(s => s.Add().Type(PolarChartSeriesType.Area).Name("Function"))
.Legend(l => l.Visible(false))
.ArgumentAxis(a => a.Inverted(true).StartAngle(90).TickInterval(30))
.ValueAxis(a => a.Inverted(true))
.Export(e => e.Enabled(true))
.Title("Inverted Rose in Polar Coordinates")
)
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text.Json;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class ChartsController : Controller {
public ActionResult InvertedChart() {
return View();
}
}
}#chart {
height: 440px;
}