Sunburst
Sunburst
Theming
Features
Sample
Description
The appearance of the Sunburst chart control is largely defined in CSS. In addition to the default theme, we include several professionally designed themes to enable customizing the appearance of all MVC controls to achieve a consistent and attractive look.
You can customize the appearance of the Sunburst chart control using CSS. To do this, copy the CSS rules from the default theme to a new CSS file and modify the properties as needed.
In this example, we have added the "custom-sunburst-chart" CSS class to the control and defined CSS rules to change the fill, font family, and font weight of the header and fill color of the slices.
Source
ThemingController.cs
using System;
using System.Web.Mvc;
using MvcExplorer.Models;
namespace MvcExplorer.Controllers
{
public partial class SunburstController : Controller
{
public ActionResult Theming()
{
return View(_data);
}
}
}
Theming.cshtml
@using C1.Web.Mvc.Chart
@section Styles{
<style type="text/css">
.custom-sunburst-chart.wj-sunburst .wj-header .wj-title {
fill: #666;
font-family: 'Courier New', Courier, monospace;
font-weight: bold;
}
.custom-sunburst-chart.wj-sunburst ellipse,
.custom-sunburst-chart.wj-sunburst path {
stroke-width: 0;
}
.custom-sunburst-chart.wj-sunburst ellipse {
fill: yellow;
}
.custom-sunburst-chart.wj-sunburst .slice-level2 > path {
fill: red;
}
.custom-sunburst-chart.wj-sunburst .slice-level3 > path {
fill: blue;
}
.custom-sunburst-chart.wj-sunburst .slice-level4 > path {
fill: black;
}
.custom-sunburst-chart.wj-sunburst .slice-level5 > path {
fill: white;
stroke-width: 2;
stroke: black;
}
</style>
}
@model IEnumerable<HierarchicalData>
@(Html.C1().Sunburst<HierarchicalData>()
.Bind("Year", "Value", Model)
.DataLabel(dl => dl.Content("{name}").Position(PieLabelPosition.Center))
.BindingName("Year, Quarter, Month")
.CssClass("custom-sunburst-chart"))
@section Description{
<p>@Html.Raw(Resources.Sunburst.Theming_Text0)</p>
<p>@Html.Raw(Resources.Sunburst.Theming_Text1)</p>
<p>@Html.Raw(Resources.Sunburst.Theming_Text2)</p>
}
Documentation