@using Trirand.Web.Mvc

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>jqChart for ASP.NET - Negative Stack Chart</title>
    <!-- jQuery runtime minified -->    
    <script src="~/Scripts/jquery-3.2.1.min.js" type="text/javascript"></script>  
    <!-- Include the javascript client-side file for jqChart -->
    <script type="text/javascript" src="~/Scripts/trirand/jquery.jqChart.min.js"></script>
</head>
<body>
    <div>
        <!--
        The Html.Trirand().JQChart() helper has two parameters
            - the model of the chart -- all chart properties, data and settings
            - the ID of the chart -- can be used for client-side manipulation
        In this example we are using hardcoded model in the View, but you can contruct the model in 
        the controller based on runtime criteria and database data and pass the model 
        to the View using ViewData
        -->
        @(Html.Trirand().JQChart(
                new JQChart
                {
                    Width = 600,                    
                    Height = 410,
                    Type = ChartType.Bar,
                    Title = new ChartTitleSettings { Text = "Population pyramid for Germany, midyear 2010" },
                    SubTitle = new ChartTitleSettings { Text = "Source: www.census.gov" },
                    XAxis = new List<ChartXAxisSettings>
                    {
                        new ChartXAxisSettings
                        {
                            Reversed = false,                                                        
                            Categories = new List<string>
                            {
                                "0-4", "5-9", "10-14", "15-19",
                                "20-24", "25-29", "30-34", "35-39", "40-44",
                                "45-49", "50-54", "55-59", "60-64", "65-69",
                                "70-74", "75-79", "80-84", "85-89", "90-94",
                                "95-99", "100 +"
                            }                            
                        },
                        new ChartXAxisSettings
                        {
                            Opposite = true,
                            Reversed = false,
                            Categories = new List<string>
                            {
                                "0-4", "5-9", "10-14", "15-19",
                                "20-24", "25-29", "30-34", "35-39", "40-44",
                                "45-49", "50-54", "55-59", "60-64", "65-69",
                                "70-74", "75-79", "80-84", "85-89", "90-94",
                                "95-99", "100 +"
                            },
                            LinkedTo = 0
                        }
                             
                    },
                    YAxis = new List<ChartYAxisSettings>
                    {
                        new ChartYAxisSettings
                        {  
                            
                            Min = -4000000,
                            Max = 4000000
                        }                        
                    },
                    PlotOptions  = new ChartPlotOptionsSettings
                    {
                        Series = new ChartSeriesPlotSettings
                        {
                            Stacking = ChartSeriesStacking.Normal
                        }                        
                    },
                    ToolTip = new ChartToolTipSettings
                    {
                        Formatter = "formatToolTip"
                    },
                    Series = new List<ChartSeriesSettings>
                    {                         
                        new ChartSeriesSettings
                        {
                            
                            Name = "Male",
                            Data = new List<ChartPoint>().FromCollection(
                                new int [] { 
                                    -1746181, -1884428, -2089758, -2222362, -2537431, -2507081, -2443179,
                                    -2664537, -3556505, -3680231, -3143062, -2721122, -2229181, -2227768,
                                    -2176300, -1329968, -836804, -354784, -90569, -28367, -3878
                                }
                            )
                        },
                        new ChartSeriesSettings
                        {
                            Name = "Female",
                            Data = new List<ChartPoint>().FromCollection(
                                new int [] { 
                                    1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874,
                                    3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638,
                                    1447162, 1005011, 330870, 130632, 21208
                                }
                            )
                        }
                    }                    
                }                
                , "ColumnBarNegativeChart")
)   
        
        
        <script type="text/javascript">      
       
        
        function formatToolTip()
        {
             return '<b>'+ this.series.name +', age '+ this.point.category +'</b><br/>'+
                'Population: '+ Highcharts.numberFormat(Math.abs(this.point.y), 0);
        }
        
        
        </script>
        
        <br /><br />
        
                  
        
    </div>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCDemo.Controllers.Chart
{
    public partial class ChartController : Controller
    {
        public ActionResult ColumnBarNegativeStack()
        {
            return View();
        }
    }
}
Switch theme:


Theming is based on the very popular jQuery ThemeRoller standard. This is the same theming mechanism used by jQuery UI and is now a de-facto standard for jQuery based components. The benefits of using ThemeRoller are huge. We can offer a big set of ready to use themes created by professional designers, including Windows-like themes (Redmond), Apple-like theme (Cupertino), etc. In addition to that any jQuery UI controls on the same page will pick the same theme.

Last, but not least, you can always roll your own ThemeRoller theme, using the superb Theme Editor

To use a theme, simply reference 2 Css files in your Html <head> section - the ThemeRoller theme you wish to use, and the jqGrid own ThemeRoller Css file. For example (Redmond theme):

<link rel="stylesheet" type="text/css" media="screen" href="/themes/redmond/jquery-ui-1.8.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/themes/ui.jqgrid.css" />