HighCharts - Column Charts

Hello, this article is about how we can create a Column chart using Highcharts in js. It is used to draw column-based charts. A simple bar chart comparing emissions by pollutant. Oil and gas production has the highest overall emissions, followed by manufacturing and mining. The graph highlights the year using the axis crosshairs feature on hover.

CDN for using Area chart

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

Create a HTML file i.e, ColumnChart.html and use below code.

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-Brahmadescription">
   Column chart created by Brahma Prakash Shukla
    </p>
</figure>

Now, create a CSS file for styling of the Column chart.

.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

#container {
    height: 400px;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: red;
}

.highcharts-data-table tr:hover {
    background: yellow;
}

After that, create a JS file for showing data in Column chart.

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Emissions to air in Norway'
    },
    subtitle: {
        text: 'Created By Brahma Prakash'
    },
    xAxis: {
        categories: [
            '2020',
            '2021',
            '2022',
            '2023',
            '2024',
            '2025',
            '2026',
            '2027',
            '2028',
            '2029',
            '2030',
            '2031'
        ],
        crosshair: true
    },
    yAxis: {
        title: {
            useHTML: true,
            text: 'Million tonnes CO<sub>2</sub>-equivalents'
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Oil and gas extraction',
        data: [14.93, 14.63, 14.73, 14.67, 15.37, 15.89, 15.56,
            15.32, 15.13, 14.93, 14.21, 13.16]

    }, {
        name: 'Manufacturing industries and mining',
        data: [12.24, 12.24, 11.95, 12.02, 11.65, 11.96, 11.59,
            11.94, 11.96, 11.59, 11.42, 11.76]

    }, {
        name: 'Road traffic',
        data: [10.00, 9.93, 9.97, 10.01, 10.23, 10.26, 10.00,
            9.12, 9.36, 8.72, 8.38, 8.69]

    }, {
        name: 'Agriculture',
        data: [4.35, 4.32, 4.34, 4.39, 4.46, 4.52, 4.58, 4.55,
            4.53, 4.51, 4.49, 4.57]

    }]
});

Now, your chart will look like this -

Column chart using Highcharts

Another example of Column Chart -

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>  
   </head>
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() {  
            var chart = {
               type: 'column'
            };
            var title = {
               text: 'Monthly Average Rainfall'   
            };
            var subtitle = {
               text: 'Created By Brahma Prakash Shukla'  
            };
            var xAxis = {
               categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul',
                  'Aug','Sep','Oct','Nov','Dec'],
               crosshair: true
            };
            var yAxis = {
               min: 0,
               title: {
                  text: 'Rainfall (mm)'         
               }      
            };
            var tooltip = {
               headerFormat: '<span style = "font-size:10px">{point.key}</span><table>',
               pointFormat: '<tr><td style = "color:{series.color};padding:0">{series.name}: </td>' +
                  '<td style = "padding:0"><b>{point.y:.1f} mm</b></td></tr>',
               footerFormat: '</table>',
               shared: true,
               useHTML: true
            };
            var plotOptions = {
               column: {
                  pointPadding: 0.2,
                  borderWidth: 0
               }
            };  
            var credits = {
               enabled: false
            };
            var series= [
               {
                  name: 'A',
                  data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6,
                     148.5, 216.4, 194.1, 95.6, 54.4]
               }, 
               {
                  name: 'B',
                  data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3,
                     91.2, 83.5, 106.6, 92.3]
               }, 
               {
                  name: 'C',
                  data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6,
                     52.4, 65.2, 59.3, 51.2]
               }, 
               {
                  name: 'D',
                  data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4,
                     47.6, 39.1, 46.8, 51.1]
               }
            ];     
         
            var json = {};   
            json.chart = chart; 
            json.title = title;   
            json.subtitle = subtitle; 
            json.tooltip = tooltip;
            json.xAxis = xAxis;
            json.yAxis = yAxis;  
            json.series = series;
            json.plotOptions = plotOptions;  
            json.credits = credits;
            $('#container').highcharts(json);
  
         });
      </script>
   </body>
   
</html>

Your Column chart will look like this -

Column chart using Highcharts

Hopefully, this article helps you in creating a Column chart. In other articles, I will also explain different types of charts using highchart.

Thanks