ASP .NET Core MVC Documentation

Sets or gets the title property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" title="My Title" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the description property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" description="My Description" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the source property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the showBorderLine property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" show-border-line="false" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the borderLineColor property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" border-line-color="#111888" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the borderLineWidth property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" border-line-width="3" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the backgroundColor property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the backgroundImage property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" background-image="../images/chart_background.jpg" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the showLegend property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" show-legend="true" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the legendLayout property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" legend-layout="legendLayout" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the padding property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" padding="padding" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the titlePadding property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" title-padding="titlePadding" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the colorScheme property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" color-scheme="scheme03" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the greyScale property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" grey-scale="true" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the showToolTips property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" show-tool-tips="false" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the toolTipShowDelay property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" tool-tip-show-delay="300" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the toolTipHideDelay property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" tool-tip-hide-delay="300" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the toolTipMoveDuration property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" tool-tip-move-duration="200" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the rtl property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" rtl="true" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the enableCrosshairs property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" enable-crosshairs="false" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the crosshairsColor property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" crosshairs-color="#111888" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the crosshairsDashStyle property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" crosshairs-dash-style="true" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the crosshairsLineWidth property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" crosshairs-dash-style="true" crosshairs-line-width="2" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the columnSeriesOverlap property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" column-series-overlap="true" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the enabled property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" enabled="false" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the enableAnimations property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" enable-animations="false" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the animationDuration property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" animation-duration="1500" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the enableAxisTextAnimation property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" enable-axis-text-animation="true" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the renderEngine property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" render-engine="HTML5" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the xAxis property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the valueAxis property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Sets or gets the seriesGroups property.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Code examples

Bind to the toggle event of jqxChart.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" on-toggle="eventHandler()">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Code examples

Bind to the click event of jqxChart.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" on-click="eventHandler()">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Code examples

Bind to the mouseOver event of jqxChart.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" on-mouse-over="eventHandler()">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Code examples

Bind to the mouseOut event of jqxChart.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" on-mouse-out="eventHandler()">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Code examples

Bind to the refreshBegin event of jqxChart.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" on-refresh-begin="eventHandler()">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Code examples

Bind to the refreshEnd event of jqxChart.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" on-refresh-end="eventHandler()">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Code examples

Bind to the rangeSelectionChanging event of jqxChart.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" on-range-selection-changing="eventHandler()">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Code examples

Bind to the rangeSelectionChanged event of jqxChart.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" on-range-selection-changed="eventHandler()">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		var result = instance["refresh"]();									
	}									
</script>									
}

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		var result = instance["update"]();									
	}									
</script>									
}

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		var result = instance["destroy"]();									
	}									
</script>									
}

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["addColorScheme"](scheme99,['#722694', '#AA4643', '#89A54E', '#71588F', '#4198AF']);									
	}									
</script>									
}

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["removeColorScheme"](scheme01);									
	}									
</script>									
}

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["getItemsCount"](0,1,0);									
	}									
</script>									
}

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["getItemCoord"](0,1,0);									
	}									
</script>									
}

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["getXAxisRect"](0);									
	}									
</script>									
}

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["getXAxisLabels"](0);									
	}									
</script>									
}

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["getValueAxisRect"](0);									
	}									
</script>									
}

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["getValueAxisLabels"](0);									
	}									
</script>									
}

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["getColorScheme"]('scheme01');									
	}									
</script>									
}

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["hideSerie"](0,1,0);									
	}									
</script>									
}

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["showSerie"](0,1,0);									
	}									
</script>									
}

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" source="Model" instance="getInstance()">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]'>
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["hideToolTip"](100);									
	}									
</script>									
}