Title and subtitle in ASP.NET Core 3D Circular Chart Component

Title

The 3D Circular Chart can be given a title by using the Title property to display information about the plotted data.

<ejs-circularchart3d id="container" title="Oil and other liquid imports in USA" tilt="-45">
    <e-circularchart3d-legendsettings visible="false">
    </e-circularchart3d-legendsettings>
    <e-circularchart3d-series-collection>
        <e-circularchart3d-series dataSource="ViewBag.dataSource" xName="X" yName="Y">
        </e-circularchart3d-series>
    </e-circularchart3d-series-collection>
</ejs-circularchart3d>
public IActionResult Index()
{
    List<CircularChartData> circularData = new List<CircularChartData>
    {
        new CircularChartData { X = "Saudi Arabia",   Y = 58 },
        new CircularChartData { X = "Persian Gulf",   Y = 15 },
        new CircularChartData { X = "Canada",         Y = 13 },
        new CircularChartData { X = "Venezuela",      Y = 8  },
        new CircularChartData { X = "Mexico",         Y = 3  },
        new CircularChartData { X = "Russia",         Y = 2  },
        new CircularChartData { X = "Miscellaneous",  Y = 1  }
    };
    ViewBag.dataSource = circularData;
    return View();
}
public class CircularChartData
{
    public string X;
    public double Y;
}

Title customization

The title of the 3D Circular Chart can be customized using the TitleStyle property.

<ejs-circularchart3d id="container" title="Oil and other liquid imports in USA" tilt="-45">
    <e-circularchart3d-legendsettings visible="false">
    </e-circularchart3d-legendsettings>
    <e-circularchart3d-titlestyle fontFamily="Arial" fontStyle="italic" fontWeight="regular" color="#E27F2D" size="23px">
    </e-circularchart3d-titlestyle>
    <e-circularchart3d-series-collection>
        <e-circularchart3d-series dataSource="ViewBag.dataSource" xName="X" yName="Y">
        </e-circularchart3d-series>
    </e-circularchart3d-series-collection>
</ejs-circularchart3d>
public IActionResult Index()
{
    List<CircularChartData> circularData = new List<CircularChartData>
    {
        new CircularChartData { X = "Saudi Arabia",   Y = 58 },
        new CircularChartData { X = "Persian Gulf",   Y = 15 },
        new CircularChartData { X = "Canada",         Y = 13 },
        new CircularChartData { X = "Venezuela",      Y = 8  },
        new CircularChartData { X = "Mexico",         Y = 3  },
        new CircularChartData { X = "Russia",         Y = 2  },
        new CircularChartData { X = "Miscellaneous",  Y = 1  }
    };
    ViewBag.dataSource = circularData;
    return View();
}
public class CircularChartData
{
    public string X;
    public double Y;
}

Subtitle

The 3D Circular Chart can be given a subtitle by using the SubTitle property to display information about the plotted data.

<ejs-circularchart3d id="container" title="Oil and other liquid imports in USA" subTitle="In the year 2014 - 2015" tilt="-45">
    <e-circularchart3d-legendsettings visible="false">
    </e-circularchart3d-legendsettings>
    <e-circularchart3d-series-collection>
        <e-circularchart3d-series dataSource="ViewBag.dataSource" xName="X" yName="Y">
        </e-circularchart3d-series>
    </e-circularchart3d-series-collection>
</ejs-circularchart3d>
public IActionResult Index()
{
    List<CircularChartData> circularData = new List<CircularChartData>
    {
        new CircularChartData { X = "Saudi Arabia",   Y = 58 },
        new CircularChartData { X = "Persian Gulf",   Y = 15 },
        new CircularChartData { X = "Canada",         Y = 13 },
        new CircularChartData { X = "Venezuela",      Y = 8  },
        new CircularChartData { X = "Mexico",         Y = 3  },
        new CircularChartData { X = "Russia",         Y = 2  },
        new CircularChartData { X = "Miscellaneous",  Y = 1  }
    };
    ViewBag.dataSource = circularData;
    return View();
}
public class CircularChartData
{
    public string X;
    public double Y;
}

Subtitle customization

The subtitle of the 3D Circular Chart can be customized using the SubTitleStyle property.

<ejs-circularchart3d id="container" title="Oil and other liquid imports in USA" subTitle="In the year 2014 - 2015" tilt="-45">
    <e-circularchart3d-legendsettings visible="false">
    </e-circularchart3d-legendsettings>
    <e-circularchart3d-subtitlestyle fontFamily="Arial" fontStyle="italic" fontWeight="regular" color="#E27F2D" size="13px">
    </e-circularchart3d-subtitlestyle>
    <e-circularchart3d-series-collection>
        <e-circularchart3d-series dataSource="ViewBag.dataSource" xName="X" yName="Y">
        </e-circularchart3d-series>
    </e-circularchart3d-series-collection>
</ejs-circularchart3d>
public IActionResult Index()
{
    List<CircularChartData> circularData = new List<CircularChartData>
    {
        new CircularChartData { X = "Saudi Arabia",   Y = 58 },
        new CircularChartData { X = "Persian Gulf",   Y = 15 },
        new CircularChartData { X = "Canada",         Y = 13 },
        new CircularChartData { X = "Venezuela",      Y = 8  },
        new CircularChartData { X = "Mexico",         Y = 3  },
        new CircularChartData { X = "Russia",         Y = 2  },
        new CircularChartData { X = "Miscellaneous",  Y = 1  }
    };
    ViewBag.dataSource = circularData;
    return View();
}
public class CircularChartData
{
    public string X;
    public double Y;
}