showing tooltip on all columns in bar chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Column Chart

Description

showing tooltip on all columns in bar chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/highcharts-more.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/highcharts-3d.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*  w w  w  . j  av  a  2s . c  om*/
var chart_data;
chart_data = {
  chart: {
    type: 'column',
    backgroundColor: '#FBFBFB',
    plotBackgroundColor: '#FBFBFB'
  },
  title: {
    text: '<b>Category-Wise APF</b>',
    verticalAlign: 'top',
    useHTML: true,
    style: {
      color: '#454545',
      fontSize: '14px'
    },
    y: 13
  },
  xAxis: {
    type: 'category'
  },
  yAxis: {
    labels: {
      enabled: false
    },
    title: '',
    gridLineColor: '#EFEFEF'
  },
  credits: {
    enabled: false
  },
  legend: {
    enabled: false
  },
  plotOptions: {
    series: {
      dataLabels: {
        align: 'left',
        enabled: true
      }
    }
  },
  series: [{
    colorByPoint: true,
    data: [{
      name: 'Sports & Fitness',
      y: 1.34,
      color: '#2E91A4'
    }, {
      name: 'Fashion Apparels',
      y: 1.29,
      color: '#3196A5'
    }, {
      name: 'Women\'s Clothing',
      y: 1.24,
      color: '#2F9BA6'
    }, {
      name: 'Footwear',
      y: 1.23,
      color: '#319FA7'
    }, {
      name: 'Clothing & Apparels',
      y: 1.21,
      color: '#34A3A8'
    }, {
      name: 'Audio Equipments',
      y: 1.20,
      color: '#36A3A8'
    }, {
      name: 'Home Decor',
      y: 1.13,
      color: '#38ADAA'
    }, {
      name: 'Health & Personal Care',
      y: 1.12,
      color: '#38B1AB'
    }, {
      name: 'Mobile Accessories',
      y: 1.12,
      color: '#39B7AB'
    }, {
      name: 'Computer Accessories',
      y: 1.11,
      color: '#3DBBAD'
    }]
  }]
};
$('#categorywise-apf-graph').highcharts(chart_data);
    }

      </script> 
   </head> 
   <body> 
      <div style="width: 500px; height: 500px;" id="categorywise-apf-graph"></div>  
   </body>
</html>

Related Tutorials