Selection in ASP.NET CORE 3D Chart Component

9 Jan 202420 minutes to read

The 3D chart provides selection support for the series and its data points on mouse click.

When mouse is clicked on the data points, the corresponding series legend will also be selected.

We have different types of selection mode for selecting a data.

• None
• Point
• Series
• Cluster

Point

To select a point, set the SelectionMode property to Point.

CSHTML

<ejs-chart3d id="container" title="Olympic Medals" wallColor="transparent" enableRotation="true" rotation="7" tilt="10"
    depth="100" selectionMode="@Syncfusion.EJ2.Charts.Chart3DSelectionMode.Point">
    <e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category">
    </e-chart3d-primaryxaxis>
    <e-chart3d-series-collection>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="gold" name="Gold"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="silver" name="Silver"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="bronze" name="Bronze"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>

Point-selection.cs

public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { country= "USA",       gold= 50, silver= 70, bronze= 45 },
        new ChartData { country= "China",     gold= 40, silver= 60, bronze= 55 },
        new ChartData { country= "Japan",     gold= 70, silver= 60, bronze= 50 },
        new ChartData { country= "Australia", gold= 60, silver= 56, bronze= 40 },
        new ChartData { country= "France",    gold= 50, silver= 45, bronze= 35 },
        new ChartData { country= "Germany",   gold= 40, silver= 30, bronze= 22 },
        new ChartData { country= "Italy",     gold= 40, silver= 35, bronze= 37 },
        new ChartData { country= "Sweden",    gold= 30, silver= 25, bronze= 27 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string country;
    public double gold;
    public double silver;
    public double bronze;
}

Series

To select a series, set the SelectionMode property to Series.

CSHTML

<ejs-chart3d id="container" title="Olympic Medals" wallColor="transparent" enableRotation="true" rotation="7" tilt="10"
    depth="100" selectionMode="@Syncfusion.EJ2.Charts.Chart3DSelectionMode.Series">
    <e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category">
    </e-chart3d-primaryxaxis>
    <e-chart3d-series-collection>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="gold" name="Gold"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="silver" name="Silver"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="bronze" name="Bronze"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>

Series-selection.cs

public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { country= "USA",       gold= 50, silver= 70, bronze= 45 },
        new ChartData { country= "China",     gold= 40, silver= 60, bronze= 55 },
        new ChartData { country= "Japan",     gold= 70, silver= 60, bronze= 50 },
        new ChartData { country= "Australia", gold= 60, silver= 56, bronze= 40 },
        new ChartData { country= "France",    gold= 50, silver= 45, bronze= 35 },
        new ChartData { country= "Germany",   gold= 40, silver= 30, bronze= 22 },
        new ChartData { country= "Italy",     gold= 40, silver= 35, bronze= 37 },
        new ChartData { country= "Sweden",    gold= 30, silver= 25, bronze= 27 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string country;
    public double gold;
    public double silver;
    public double bronze;
}

Cluster

To select the points that corresponds to the same index in all the series, set the SelectionMode property to Cluster.

CSHTML

<ejs-chart3d id="container" title="Olympic Medals" wallColor="transparent" enableRotation="true" rotation="7" tilt="10"
    depth="100" selectionMode="@Syncfusion.EJ2.Charts.Chart3DSelectionMode.Cluster">
    <e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category">
    </e-chart3d-primaryxaxis>
    <e-chart3d-series-collection>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="gold" name="Gold"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="silver" name="Silver"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="bronze" name="Bronze"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>

Cluster-selection.cs

public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { country= "USA",       gold= 50, silver= 70, bronze= 45 },
        new ChartData { country= "China",     gold= 40, silver= 60, bronze= 55 },
        new ChartData { country= "Japan",     gold= 70, silver= 60, bronze= 50 },
        new ChartData { country= "Australia", gold= 60, silver= 56, bronze= 40 },
        new ChartData { country= "France",    gold= 50, silver= 45, bronze= 35 },
        new ChartData { country= "Germany",   gold= 40, silver= 30, bronze= 22 },
        new ChartData { country= "Italy",     gold= 40, silver= 35, bronze= 37 },
        new ChartData { country= "Sweden",    gold= 30, silver= 25, bronze= 27 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string country;
    public double gold;
    public double silver;
    public double bronze;
}

Selection type

To select multiple points or series, enable the IsMultiSelect property.

CSHTML

<ejs-chart3d id="container" title="Olympic Medals" wallColor="transparent" enableRotation="true" rotation="7" tilt="10"
    depth="100" selectionMode="@Syncfusion.EJ2.Charts.Chart3DSelectionMode.Series" isMultiSelect="true">
    <e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category">
    </e-chart3d-primaryxaxis>
    <e-chart3d-series-collection>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="gold" name="Gold"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="silver" name="Silver"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="bronze" name="Bronze"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>

Selection-type.cs

public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { country= "USA",       gold= 50, silver= 70, bronze= 45 },
        new ChartData { country= "China",     gold= 40, silver= 60, bronze= 55 },
        new ChartData { country= "Japan",     gold= 70, silver= 60, bronze= 50 },
        new ChartData { country= "Australia", gold= 60, silver= 56, bronze= 40 },
        new ChartData { country= "France",    gold= 50, silver= 45, bronze= 35 },
        new ChartData { country= "Germany",   gold= 40, silver= 30, bronze= 22 },
        new ChartData { country= "Italy",     gold= 40, silver= 35, bronze= 37 },
        new ChartData { country= "Sweden",    gold= 30, silver= 25, bronze= 27 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string country;
    public double gold;
    public double silver;
    public double bronze;
}

Selection during initial loading

In a 3D chart, selecting a point or series during initial loading can only be done programmatically. The SelectedDataIndexes property can be used for this.

CSHTML

<ejs-chart3d id="container" title="Olympic Medals" wallColor="transparent" enableRotation="true" rotation="7" tilt="10"
    depth="100" selectionMode="@Syncfusion.EJ2.Charts.Chart3DSelectionMode.Point" isMultiSelect="true">
    <e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category">
    </e-chart3d-primaryxaxis>
    <e-chart3d-series-collection>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="gold" name="Gold"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="silver" name="Silver"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="bronze" name="Bronze"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
    </e-chart3d-series-collection>
    <e-chart3d-selecteddataindexes>
        <e-chart3d-selecteddataindex series="0" point="1"></e-chart3d-selecteddataindex>
        <e-chart3d-selecteddataindex series="2" point="3"></e-chart3d-selecteddataindex>
    </e-chart3d-selecteddataindexes>
</ejs-chart3d>

Onload.cs

public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { country= "USA",       gold= 50, silver= 70, bronze= 45 },
        new ChartData { country= "China",     gold= 40, silver= 60, bronze= 55 },
        new ChartData { country= "Japan",     gold= 70, silver= 60, bronze= 50 },
        new ChartData { country= "Australia", gold= 60, silver= 56, bronze= 40 },
        new ChartData { country= "France",    gold= 50, silver= 45, bronze= 35 },
        new ChartData { country= "Germany",   gold= 40, silver= 30, bronze= 22 },
        new ChartData { country= "Italy",     gold= 40, silver= 35, bronze= 37 },
        new ChartData { country= "Sweden",    gold= 30, silver= 25, bronze= 27 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string country;
    public double gold;
    public double silver;
    public double bronze;
}

Selection through legend

To select a point or series through legend use the ToggleVisibility property. Also, use EnableHighlight property for highlighting the series through legend.

CSHTML

<ejs-chart3d id="container" title="Olympic Medals" wallColor="transparent" enableRotation="true" rotation="7" tilt="10"
    depth="100">
    <e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category">
    </e-chart3d-primaryxaxis>
    <e-chart3d-legendsettings visible="true" toggleVisibility="false" enableHighlight="true"></e-chart3d-legendsettings>
    <e-chart3d-series-collection>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="gold" name="Gold"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="silver" name="Silver"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="bronze" name="Bronze"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>

Selection-legend.cs

public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { country= "USA",       gold= 50, silver= 70, bronze= 45 },
        new ChartData { country= "China",     gold= 40, silver= 60, bronze= 55 },
        new ChartData { country= "Japan",     gold= 70, silver= 60, bronze= 50 },
        new ChartData { country= "Australia", gold= 60, silver= 56, bronze= 40 },
        new ChartData { country= "France",    gold= 50, silver= 45, bronze= 35 },
        new ChartData { country= "Germany",   gold= 40, silver= 30, bronze= 22 },
        new ChartData { country= "Italy",     gold= 40, silver= 35, bronze= 37 },
        new ChartData { country= "Sweden",    gold= 30, silver= 25, bronze= 27 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string country;
    public double gold;
    public double silver;
    public double bronze;
}