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);
For the sake of clarity and posterity:
You can turn off the standard tooltip
, and use the dataLabels
to accomplish your goal.
tooltip: {
enabled: false,
crosshairs: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
}
By default, a small label with the y value of the column will be placed above the column.
You can use the extensive configuration options, and the formatter
function, to customize this label in a wide variety of ways, making it more like the standard tooltip
Example of a highly customized version of the dataLabel
:
Code:
plotOptions: {
series: {
dataLabels: {
enabled: true,
inside: false,
overflow: 'none',
crop: true,
shape: 'callout',
backgroundColor:'rgba(0,0,0,0.8)',
borderColor: 'rgba(0,0,0,0.9)',
color: 'rgba(255,255,255,0.75)',
borderWidth: .5,
borderRadius: 5,
y: -10,
style: {
fontFamily: 'Helvetica, sans-serif',
fontSize: '10px',
fontWeight: 'normal',
textShadow: 'none'
},
formatter: function() {
return '<strong>'+this.series.name+'</strong>'
+'<br/>Group: <strong>'+ this.x+'</strong>'
+'<br/>Value: <strong>'+ Highcharts.numberFormat(this.y,0)+'</strong>';
}
}
}
},
Fiddle:
Output:
[{ EDIT --
And, since having big labels like this can be distracting when what you really want to do is just see the data plotted, here's a version with a button to toggle the visibility of the labels:
Fiddle:
Code:
<button id="toggle">Toggle Data Labels</button>
$('#toggle').click(function() {
var enabled = chart.series[0].options.dataLabels.enabled;
console.log(enabled);
chart.series[0].update({ dataLabels: { enabled: !enabled }});
});
-- /EDIT }]
Hopefully This Fiddle answers your question.
The effect you want was achieved by using the plotOptions
API 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.