Sunburst
Sunburst
Selection
Features
Sample
Settings
Description
The Sunburst chart control allows you to select data points by clicking or touching a sunburst slice. Use the selection-mode attribute to specify whether you want to allow selection by data point or no selection at all (default).
Setting the selection-mode attribute to Point causes the Sunburst to update the selection attribute when the user clicks on a sunburst slice, and to apply the "wj-state-selected" class to the selected element. Setting the Sunburst's selection-mode property to Series or None will disable selections within the control.
The Sunburst chart offers three additional properties to customize the selection:
- selected-item-offset: Specifies the offset of the selected sunburst slice from the center of the control.
- selected-item-position: Specifies the position of the selected sunburst slice. The available options are Top, Bottom, Left, Right, and None (default).
- is-animated: Determines whether or not to animate the selection.
Source
SelectionController.cs
using C1.Web.Mvc.Chart;
using Microsoft.AspNetCore.Mvc;
using MvcExplorer.Models;
using System;
using System.Collections.Generic;
namespace MvcExplorer.Controllers
{
public partial class SunburstController : Controller
{
public ActionResult Selection()
{
ViewBag.DemoSettingsModel = new ClientSettingsModel
{
Settings = new Dictionary<string, object[]>
{
{"SelectionMode", new object[] {SelectionMode.None, SelectionMode.Point, SelectionMode.Series }},
{"SelectedItemPosition", new object[] { Position.None, Position.Left, Position.Top, Position.Right, Position.Bottom, Position.Auto }},
{"SelectedItemOffset", new object[] {0, 0.1, 0.2, 0.3, 0.4, 0.5}},
{"IsAnimated", new object[] {false, true}}
}
};
return View(_data);
}
}
}
Selection.cshtml
@using C1.Web.Mvc.Chart
@model IEnumerable<HierarchicalData>
@{
ViewBag.DemoSettings = true;
ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;
}
<c1-sunburst id="@demoSettingsModel.ControlId" header="Sales" is-animated="false"
selection-mode="None" selected-item-offset="0" selected-item-position="None"
binding-name="Year, Quarter, Month" binding="Value">
<c1-items-source source-collection="Model"></c1-items-source>
<c1-flex-pie-datalabel content="{name}" position="Center"></c1-flex-pie-datalabel>
</c1-sunburst>
@section Description{
<p>@Html.Raw(SunburstRes.Selection_Text0)</p>
<p>@Html.Raw(SunburstRes.Selection_Text1)</p>
<p>@Html.Raw(SunburstRes.Selection_Text2)</p>
<ul>
<li>
@Html.Raw(SunburstRes.Selection_Li3)
</li>
<li>@Html.Raw(SunburstRes.Selection_Li1)</li>
<li>@Html.Raw(SunburstRes.Selection_Li2)</li>
</ul>
}
Documentation