Highcharts Demo

author(s): Torstein Hønsi

by Santosh Thakur

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

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

CSS

#container {
  min-width: 320px;
  max-width: 600px;
  margin: 0 auto;
}

JavaScript

var chart = Highcharts.chart('container', {

  title: {
    text: 'Best Airline Fare Price Graph'
  },
  legend: {
      itemStyle: {
         fontWeight: 'bold',
         fontSize: '13px'
      }
   },
   xAxis: {
      gridLineWidth: 0,
      labels: {
         style: {
            fontSize: '12px'
         }
      },
      categories: ['United', 'American', 'Delta', 'Lufthansa', 'Southwest', 'Alaska', 'JetBlue']
   },
   yAxis: {
      gridLineWidth: 0,
      minorTickInterval: 'false',
      
      title: {
         style: {
            textTransform: 'uppercase',
            fontSize: false,
            display: 'none'
         }
      },
      labels: {
         style: {
            fontSize: '12px'
         }
      }
   },
   plotOptions: {
      candlestick: {
         lineColor: '#404048'
      }
   },
	colors: ['#8cd7d3', '#8cd7d3', '#8cd7d3', '#8cd7d3', '#8cd7d3', '#f2ea5b', '#8cd7d3'],
  series: [{
    type: 'column',
    colorByPoint: true,
    data: [50.00, 
    37.10, 
    50.00, 
    60.00, 
    70.00, 
    150.00, 
    100.00],
    showInLegend: false
  }]
 
});