ASP .NET Core MVC Chart Tag Helper

The jqx-chart tag helper adds a Chart component to a web page. 
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@model IEnumerable<jQWidgets.AspNet.Core.Models.BrowserShare>
@{
    ViewData["Title"] = "ASP .NET MVC Pie Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 5, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 0, Top = 0, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle() { Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
}
<label>ASP .NET Core MVC Chart Tag Helper Example</label><br/><br/>
<jqx-chart style="width: 850px; height: 500px;" colorScheme="scheme02" padding="padding" titlePadding="titlePadding" title="Desktop browsers share" description="(source: wikipedia.org)" showLegend="false" legendPosition="legendPosition" source="Model">
    <jqx-chart-series-groups>   
         <jqx-chart-serie-group showLabels="true" type=@SerieType.Pie>
                <jqx-chart-series>
                    <jqx-chart-serie dataField="Share" displayText="Browser" labelRadius="120" initialAngle="15" radius="170" centerOffset="0" formatSettings="formatSettings">
                   </jqx-chart-serie>
                </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>
jqx-chart-series-groups tag helper should be defined within the jqx-chart tag helper and defines the Chart series groups collection. jqx-chart-serie-group tag helper should be defined within the jqx-chart-series-groups tag helper and defines a Chart serie group. jqx-chart-series tag helper should be defined within the jqx-chart-serie-group tag helper and defines the Chart series collection. jqx-chart-serie tag helper should be defined within the jqx-chart-series tag helper and defines a Chart serie. The for and radiusFor members can be used for model binding. jqx-chart-x-axis tag helper should be defined within the jqx-chart tag helper and defines the Chart's X Axis. The for member can be used for model binding. jqx-chart-value-axis tag helper should be defined within the jqx-chart tag helper and defines the Chart's Value Axis. jqx-chart-title tag helper should be defined within the jqx-chart-value-axis tag helper and defines the Chart's Title. jqx-chart-labels tag helper should be defined within the jqx-chart-value-axis tag helper and defines the Chart's Labels. jqx-chart-range-selector tag helper should be defined within the jqx-chart tag helper and defines the Chart's Range selector. 
@model IEnumerable<jQWidgets.AspNet.Core.Models.ChartSalesDataItem>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Bubble Chart Example";
    var item = Model.FirstOrDefault();
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 5, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 90, Top = 0, Right = 0, Bottom = 10 };
    FormatSettings formatSettings = new FormatSettings() { Prefix = "$", ThousandsSeparator="," };
}
<label>ASP .NET MVC Core Bubble Chart Example</label><br/><br/>
<jqx-chart style="width: 850px; height: 500px;" colorScheme="scheme02" showLegend="true" padding="padding" titlePadding="titlePadding" title="Sales by City in Q1 and Q2, and YoY sales growth"
     description="(the size of the circles represents relative YoY growth)" source="Model">
    <jqx-chart-x-axis valuesOnTicks="false" for="@item.City" ></jqx-chart-x-axis>
    <jqx-chart-value-axis unitInterval="50000" minValue="50000" maxValue="350000">
        <jqx-chart-title text="Sales ($)"></jqx-chart-title>
        <jqx-chart-labels horizontalAligment="HorizontalAlignment.Right" formatSettings="formatSettings"></jqx-chart-labels>
    </jqx-chart-value-axis>
    <jqx-chart-series-groups>
        <jqx-chart-serie-group type="SerieType.Bubble">
            <jqx-chart-series>
                <jqx-chart-serie for="@item.SalesQ1" radiusFor="@item.YoYGrowthQ1" minRadius="10" maxRadius="30" displayText="Sales in Q1"></jqx-chart-serie>
                <jqx-chart-serie for="@item.SalesQ2" radiusFor="@item.YoYGrowthQ2" minRadius="10" maxRadius="30" displayText="Sales in Q2"></jqx-chart-serie>
            </jqx-chart-series>
        </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Chart Types

The Chart component supports several common chart types. You can plot series of different types on a common chart. A type must be specified for each chart series group. The following Chart types are supported:

  • column - simple column series
  • stackedcolumn - stacked column series
  • stackedcolumn100 - percentage stacked columns
  • line - simple streight lines connecting the value points
  • pie - circular chart divided into sectors, illustrating proportion
  • donut - donut series
  • bar - bar series
  • candlestick - candlestick financial series
  • ohlc - ohlc financial series
  • bubble - data is displayed as a collection of bubbles
  • scatter - data is displayed as a collection of points
  • stackedline - stacked lines
  • stackedline100 - percentage stacked lines
  • spline - smooth lines connecting the value points
  • stackedspline - smooth stacked lines
  • stackedspline100 - percentage stacked smooth lines
  • polarseries - polar series
  • spiderseries - spider series
  • area - area connecting the value points with streight lines
  • stackedarea- stacked area with streight lines between the points
  • stackedline100 - percentage stacked area
  • areaspline - smooth area connecting the value points
  • stackedareaspline - smooth stacked areas
  • stackedareaspline100 - percentage stacked smooth area
  • waterfall - waterfall chart