Bar chart with Line Us

by Bharathi Prasannaa

HTML

<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>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.setOptions({
  colors: ['#5e7b89', '#6b9357']
});


Highcharts.chart('container', {
  chart: {
    type: 'column',
    margin: [80, 0, 60, 60]
  },


  title: {
    text: ''
  },
  xAxis: {

    tickWidth: 0,
    categories: ['Jan-17', 'Feb-17', 'Mar-17', 'Apr-17', 'May-17', 'Jun-17', 'Jul-17', 'Aug-17', 'Sep-17', 'Oct-17', 'Nov-17', 'Dec-17'],
    labels:{
     style: {
          "fontSize": "12px",
          "fontWeight": "normal",
          
         
        },
     rotation: -90,
      x: 0,
      y: 8
    }
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Total Bill / Invoice Amount',
     
    },
    stackLabels: {
      enabled: false,

    }
  },
  legend: {
    align: 'right',
    x: 0,
    verticalAlign: 'top',
    y: 0,
    floating: true,
    backgroundColor: 'white',
    borderWidth: 0,
    shadow: false
  },
  tooltip: {
    headerFormat: '<b>{point.x}</b><br/>',
    pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
  },
  plotOptions: {
    series: {
     marker: {
                enabled: false
            },
      dataLabels: {
        style: {
          "fontSize": "12px",
          "fontWeight": "normal",
          "textOutline": "0px contrast",
          "fontFamily":"Lato"
        },
        rotation: 270,
      },
      borderWidth: 0,
      pointPadding: 0
    },
    column: {
      stacking: 'normal',
      dataLabels: {
        enabled: true,
        color: '#fff'
      }
    }
  },
  series: [{
    name: 'Own AC',
    data: [5, 3, 4, 7, 8, 5, 3, 5, 7, 6, 4, 2]
  }, {
    name: 'Client AC',
    data: [2, 2, 3, 2, 4, 2, 2, 5, 2, 4, 4, 5]
  },{
        
        type: 'spline',
        data: [3, 5, 7, 10, 12, 7, 5, 10, 7, 9, 8, 6],
        tooltip: {
            valueSuffix: '°C'
        },
        colors:[
        "red"
        ]
    }]
});