Documentation

Chart Types

jqxChart supports several common chart types. You can easily plot series of different types within the same chart. A type must be specified for each series group. Currently jqxChart supports the following series types:

  • column - simple column series
  • stackedcolumn - stacked column series
  • stackedcolumn100 - percentage stacked columns
  • rangecolumn - floating column between two values
  • line - simple streight lines connecting the value points
  • stackedline - stacked lines
  • stackedline100 - percentage stacked lines
  • spline - smooth lines connecting the value points
  • stackedspline - smooth stacked lines
  • stackedspline100 - percentage stacked smooth lines
  • stepline - step line
  • stackedstepline - stacked step line
  • stackedstepline100 - percentage stacked step line
  • area - area connecting the value points with streight lines
  • stackedarea- stacked area with streight lines between the points
  • rangearea - floating area between pairs of value points
  • stackedline100 - percentage stacked area
  • splinearea - smooth area connecting the value points
  • splinerangearea - smooth floating area between pairs of value points
  • stackedsplineara - smooth stacked area
  • stackedsplinearea100 - percentage stacked smooth area
  • steplinearea - step area connecting the value points
  • stackedsteplineara - step stacked area
  • stackedsteplinearea100 - percentage stacked step area
  • pie - circular chart divided into sectors, illustrating proportion
  • donut - chart divided into circular sectors with different inner and outer radius
  • scatter - data is displayed as a collection of points
  • bubble - data is displayed as a collection of bubbles
  • candlestick - display candlestick series using open, high, low, close data points
  • ohlc - display OHLC series using open, high, low, close data points
  • waterfall - waterfall chart
  • stackedwaterfall - stacked waterfall chart


The following code defines a single series group with three series which will be rendered as lines: 
    seriesGroups:
    [
    	{
    	    type: 'line', // change the series type here
            series: [
    	        { dataField: 'Keith', displayText: 'Keith'},
    	        { dataField: 'Erica', displayText: 'Erica'},
    	        { dataField: 'George', displayText: 'George'}
    	    ]
    	}
    ]
If you want to display multiple of series with different types you can define several series groups and change the type property.

Basic Chart

<html lang="en">
<head>
    <title id='Description'>jQuery Chart Column Series Example</title>
    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
		
            // prepare chart data
            var  sampleData = [
                    { Day:'Monday', Keith:30, Erica:15, George: 25},
                    { Day:'Tuesday', Keith:25, Erica:25, George: 30},
                    { Day:'Wednesday', Keith:30, Erica:20, George: 25},
                    { Day:'Thursday', Keith:35, Erica:25, George: 45},
                    { Day:'Friday', Keith:20, Erica:20, George: 25},
                    { Day:'Saturday', Keith:30, Erica:20, George: 30},
                    { Day:'Sunday', Keith:60, Erica:45, George: 90}
                ];
				
            // prepare jqxChart settings
            var settings = {
                title: "Fitness & exercise weekly scorecard",
                description: "Time spent in vigorous exercise",
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                xAxis:
                {
                    dataField: 'Day',
                    gridLines: {visible: false},
                    tickMarks: {visible: true}
                },
                valueAxis:
                {
                    minValue: 0,
                    maxValue: 100,
                    unitInterval: 10,
                    title: {text: 'Time in minutes'}
                },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'column',
                            columnsGapPercent: 30,
                            seriesGapPercent: 10,
                            series: [
                                    { dataField: 'Keith', displayText: 'Keith'},
                                    { dataField: 'Erica', displayText: 'Erica'},
                                    { dataField: 'George', displayText: 'George'}
                                ]
                        }
                    ]
            };
            
            // select the chartContainer DIV element and render the chart.
            $('#chartContainer').jqxChart(settings);
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body style="background:white;">
	<div id='chartContainer' style="width:600px; height: 400px"/>
</body>
</html>