Column Chart with Fixed Placement

Following is an example of a Column Chart with fixed placement.

We have already seen the configuration used to draw a chart in Highcharts Configuration Syntax chapter. Let us now see additional configurations and also how we have added pointPlacement and pointPadding under series.

An example of a Column Chart with fixed placement is given below.

series.pointPadding

Padding between each column or bar, in x axis units; this defaults to 0.1.

series.pointPlacement

In a column chart, when pointPlacement is "on", the point will not create any padding of the X axis. In a polar column chart, this means that the first column points directly north. If the pointPlacement is "between", the columns will be laid out between ticks. This can be useful for visualising an amount between two points in time or in a certain sector of a polar chart.

Since Highcharts 3.0.2, the point placement can also be numeric, where 0 is on the axis value, -0.5 is between this value and the previous, and 0.5 is between this value and the next. Unlike the textual options, numeric point placement options won't affect axis padding.

series: {
   name: 'Employees',
   color: 'rgba(165,170,217,1)',
   data: [150, 73, 20],
   pointPadding: 0.3,
   pointPlacement: -0.2
}

Example

highcharts_column_fixed.htm

Live Demo 
<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: 'Efficiency Optimization by Branch'   
            };   
            var xAxis = {
               categories: ['Seattle HQ', 'San Francisco', 'Tokyo']
            };
            var yAxis = [
               {
                  min: 0,
                  title: {
                     text: 'Employees'
                  }
               }, 
               {
                  title: {
                     text: 'Profit (millions)'
                  },
                  opposite: true
               }
            ];
            var legend = {
               shadow: false
            };
            var tooltip = {
               shared: true
            };
            var credits = {
               enabled: false
            };
            var plotOptions = {
               column: {
                  grouping: false,
                  shadow: false,
                  borderWidth: 0
               }
            };
            var series = [
               {
                  name: 'Employees',
                  color: 'rgba(165,170,217,1)',
                  data: [150, 73, 20],
                  pointPadding: 0.3,
                  pointPlacement: -0.2
               }, 
               {
                  name: 'Employees Optimized',
                  color: 'rgba(126,86,134,.9)',
                  data: [140, 90, 40],
                  pointPadding: 0.4,
                  pointPlacement: -0.2
               }, 
               {
                  name: 'Profit',
                  color: 'rgba(248,161,63,1)',
                  data: [183.6, 178.8, 198.5],
                  
                  tooltip: {
                     valuePrefix: '$',
                     valueSuffix: ' M'
                  },
                  pointPadding: 0.3,
                  pointPlacement: 0.2,
                  yAxis: 1
               }, 
               {
                  name: 'Profit Optimized',
                  color: 'rgba(186,60,61,.9)',
                  data: [203.6, 198.8, 208.5],
                  
                  tooltip: {
                     valuePrefix: '$',
                     valueSuffix: ' M'
                  },
                  pointPadding: 0.4,
                  pointPlacement: 0.2,
                  yAxis: 1      
               }
            ];     
            var json = {};   
            json.chart = chart; 
            json.title = title; 
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.credits = credits;
            json.legend = legend;
            json.tooltip = tooltip;
            json.plotOptions = plotOptions;
            json.series = series;
            $('#container').highcharts(json);
         });
      </script>
   </body>
   
</html>

Result

Verify the result.

highcharts_column_charts.htm
Advertisements