Column in JavaScript (ES5) Chart control

08 May 2023 / 3 minutes to read

Column

To render a column series, use series type as Column and inject ColumnSeries module using Chart.Inject(ColumnSeries) method.

Source

Preview

index.js

index.html

var chartData = [
      { country: "USA", gold: 50 },
      { country: "China", gold: 40 },
      { country: "Japan", gold: 70 },
      { country: "Australia", gold: 60 },
      { country: "France", gold: 50 },
      { country: "Germany", gold: 40 },
      { country: "Italy", gold: 40 },
      { country: "Sweden", gold: 30 }
];
var chart = new ej.charts.Chart({
    primaryXAxis: {
        valueType: 'Category',
        title: 'Countries'
    },
    primaryYAxis: {
        minimum: 0, maximum: 80,
        interval: 20, title: 'Medals'
    },
    series:[{
        dataSource: chartData,
        xName: 'country', yName: 'gold',
        name: 'Gold',
        // Series type as column series
        type: 'Column'
    }],
    title: 'Olympic Medals'
}, '#element');

<!DOCTYPE html><html lang="en"><head>
            
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Column space and width

The columnSpacing and columnWidth properties are used to customize the space between columns.

Source

Preview

index.js

index.html

var chartData = [
    { country: 'USA', gold: 50, silver: 40 },
    { country: 'China', gold: 40, silver: 35 },
    { country: 'Japan', gold: 70, silver: 65 },
    { country: 'Australia', gold: 60, silver: 50 },
    { country: 'France', gold: 50, silver: 55 },
    { country: 'Germany', gold: 40, silver: 20 },
    { country: 'Italy', gold: 40, silver: 30 },
    { country: 'Sweden', gold: 30, silver: 40 }
];
var chart = new ej.charts.Chart({
    primaryXAxis: {
        valueType: 'Category',
        title: 'Countries'
    },
    primaryYAxis: {
        minimum: 0, maximum: 80,
        interval: 20, title: 'Medals'
    },
    series:[{
        dataSource: chartData,
        xName: 'country', yName: 'gold',
        name: 'Gold',
        // Series type as column series
        type: 'Column'
    },
    {
        dataSource: chartData,
        xName: 'country',
        yName: 'silver',
        name: 'Silver',
        columnWidth: 0.75,
        columnSpacing: 1.5,
        // Series type as column series
        type: 'Column',
      }],
    title: 'Olympic Medals'
}, '#element');

<!DOCTYPE html><html lang="en"><head>
            
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Grouped column

You can use the groupName property to group the data points in the column type charts. Data points with same group name are grouped together.

Source

Preview

index.js

index.html

var chart = new ej.charts.Chart({
     primaryXAxis: {
            valueType: 'Category',
        },
        series: [
            {
                type: 'Column', xName: 'x', width: 2, yName: 'y', groupName: 'USA', columnWidth: 0.7,
                dataSource: [{ x: '2012', y: 104 }, { x: '2016', y: 121 }, { x: '2020', y: 113 }], columnSpacing: 0.1,
                
            },
            {
                type: 'Column', xName: 'x', width: 2, yName: 'y', groupName: 'USA', columnWidth: 0.5,
                dataSource: [{ x: '2012', y: 46 }, { x: '2016', y: 46 }, { x: '2020', y: 39 }], columnSpacing: 0.1,
               
            },
            {
                type: 'Column', xName: 'x', width: 2, yName: 'y', groupName: 'UK', columnWidth: 0.7, 
                dataSource: [{ x: '2012', y: 65 }, { x: '2016', y: 67 },{ x: '2020', y: 65 }], columnSpacing: 0.1,
               
            },
            {
                type: 'Column', xName: 'x', width: 2, yName: 'y', groupName: 'UK', columnWidth: 0.5,
                dataSource: [{ x: '2012', y: 29 }, { x: '2016', y: 27 },{ x: '2020', y: 22 }], columnSpacing: 0.1,
                
            },
        ],
}, '#element');

<!DOCTYPE html><html lang="en"><head>
            
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Series customization

The following properties can be used to customize the column series.

fill – Specifies the color of the series.
opacity – Specifies the opacity of fill.
dashArray – Specifies the dashes of series.
border – Specifies the color and width of series border.

Source

Preview

index.js

index.html

var chartData = [
      { country: "USA", gold: 50 },
      { country: "China", gold: 40 },
      { country: "Japan", gold: 70 },
      { country: "Australia", gold: 60 },
      { country: "France", gold: 50 },
      { country: "Germany", gold: 40 },
      { country: "Italy", gold: 40 },
      { country: "Sweden", gold: 30 }
];
var chart = new ej.charts.Chart({
    primaryXAxis: {
        valueType: 'Category',
        title: 'Countries'
    },
    primaryYAxis: {
        minimum: 0, maximum: 80,
        interval: 20, title: 'Medals'
    },
    series:[{
        dataSource: chartData,
        xName: 'country', yName: 'gold',
        //fill for column series
        fill: 'blue', opacity: 0.4,
        //border width and color for column series
        border: {
            width: '2',
            color: 'red'
        }, dashArray: '2.5',
        name: 'Gold',
        //series type as column series
        type: 'Column',
        marker: {visible: true}
    }],
    title: 'Olympic Medals'
}, '#element');

<!DOCTYPE html><html lang="en"><head>
            
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Column in JavaScript (ES5) Chart control

Column

Column space and width

Grouped column

Series customization

See Also