ASP.NET Core Chart Setup

Shield UI Chart for ASP.NET Core is a server-side wrapper component implemented as an ASP.NET Core MVC Helper.

For a detailed guide how to setup Shield UI for your ASP.NET Core project, check out this page.

The ASP.NET Core MVC helper API is a 1:1 mapping of the JavaScript Chart widget configuration, so you only have to get familiar with a single set of configuration options:

//JavaScript Area Chart Basic Usage demo
$(document).ready(function () {
    $("#chart").shieldChart({
        theme: ThemeChooser.theme,
        primaryHeader: {
            text: "GDP Changes per region"
        },
        exportOptions: {
            image: false,
            print: false
        },
        axisX: {
            categoricalValues: ["2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011"]
        },
        dataSeries: [{
            seriesType: 'area',
            collectionAlias: "India",
            data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
        }, {
            seriesType: 'area',
            collectionAlias: "World - wide",
            data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
        }, {
            seriesType: 'area',
            collectionAlias: "Haiti",
            data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
        }]
    });
});

//ASP.NET Core Area Chart Basic Usage demo
@(Html.ShieldChart()
    .Name("chart")
    .Theme(Request.Cookies.Theme())
    .PrimaryHeader(header => header.Text("GDP Changes per region"))
    .Export(false)
    .AxisX(axis => axis.CategoricalValues("2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011"))
    .DataSeries(series =>
        series.Area()
              .Name("India")
              .Data(new object[] { 3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855 }))
    .DataSeries(series => 
        series.Area()
              .Name("World - Wide")
              .Data(new object[] { 1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727 }))
    .DataSeries(series => 
        series.Area()
              .Name("Haiti")
              .Data(new object[] { -0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590 })))

To see the configuration options in action, please refer to our online demos.