Siddharth Siddharth - 7 months ago 120
Javascript Question

Always showing tooltip on all columns in Highcharts

Here's a column chart - https://jsfiddle.net/kx8qqh2e/

When you hover on a column, it shows a nice tooltip. I want to show the tooltips on all the columns at all times without having the user to hover over them. How can I achieve this?

var chart_data;
chart_data = {
chart: {
type: 'column',
backgroundColor: '#FBFBFB',
plotBackgroundColor: '#FBFBFB'
},
title: {
text: '<b>Category-Wise APF</b>',
verticalAlign: 'bottom',
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
},
tooltip: {
pointFormat: '<b>{point.y}</b>'
},
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);

Answer

Hopefully This Fiddle answers your question.

The effect you want was achieved by using the plotOptionsAPI link here directive in highcharts.

$(document).ready(function() {
  var chart_data;
  chart_data = {
    chart: {
      type: 'column',
      backgroundColor: '#FBFBFB',
      plotBackgroundColor: '#FBFBFB'
    },
    title: {
      text: '<b>Category-Wise APF</b>',
      verticalAlign: 'bottom',
      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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>



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