Title and subtitle in ASP.NET MVC 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.

CSHTML

@Html.EJS().CircularChart3D("container").Tilt(-45).Title("Oil and other liquid imports in USA"
).Series(series =>
{
    series.XName("X").YName("Y").DataSource(ViewBag.dataSource).Add();
}
).LegendSettings(leg => leg.Visible(false)).Render()

Title.cs

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.

CSHTML

@Html.EJS().CircularChart3D("container").Tilt(-45).Title("Oil and other liquid imports in USA"
).Series(series =>
{
    series.XName("X").YName("Y").DataSource(ViewBag.dataSource).Add();
}
).TitleStyle(ts => ts.FontFamily("Arial").FontStyle("italic").FontWeight("regular").Color("#E27F2D").Size("23px")
).LegendSettings(leg => leg.Visible(false)).Render()

Title-custom.cs

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.

CSHTML

@Html.EJS().CircularChart3D("container").Tilt(-45).Title("Oil and other liquid imports in USA"
).Series(series =>
{
    series.XName("X").YName("Y").DataSource(ViewBag.dataSource).Add();
}
).SubTitle("In the year 2014 - 2015"
).LegendSettings(leg => leg.Visible(false)).Render()

Subtitle.cs

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.

CSHTML

@Html.EJS().CircularChart3D("container").Tilt(-45).Title("Oil and other liquid imports in USA"
).Series(series =>
{
    series.XName("X").YName("Y").DataSource(ViewBag.dataSource).Add();
}
).SubTitle("In the year 2014 - 2015"
).SubTitleStyle(ts => ts.FontFamily("Arial").FontStyle("italic").FontWeight("regular").Color("#E27F2D").Size("13px")
).LegendSettings(leg => leg.Visible(false)).Render()

Subtitle-custom.cs

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;
}