score:1
Accepted answer
try this by plotoptions
plotOptions: {
series: {
dataLabels: {
enabled: true,
inside: false,
overflow: 'none',
crop: true,
shape: 'callout',
backgroundColor:'rgba(255,255,255,0.8)',
borderColor: 'rgba(0,0,255,0.8)',
color: 'rgba(0,0,0,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>';
}
}
}
}
check this below example
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
tooltip: {
enabled: false,
crosshairs: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
inside: false,
overflow: 'none',
crop: true,
shape: 'callout',
backgroundColor:'rgba(255,255,255,0.8)',
borderColor: 'rgba(0,0,255,0.8)',
color: 'rgba(0,0,0,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>';
}
}
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
#container {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.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"></div>
score:0
Instead of tooltips, you can use the data labels:
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/njp418tv/
API Reference: https://api.highcharts.com/highcharts/plotOptions.series.dataLabels
Source: stackoverflow.com
Related Query
- How to show always the pop-up at the point in a cloud graph?
- How to always show the plotLine in HighCharts?
- How do I get the value of a highcharts graph point on mouseover?
- How do I hide a Highcharts series from the chart, but always show it in the tooltip?
- How can i place a button always center of the graph
- Highstocks: "columnrange" columns are always evenly spaced. How do I make highstocks show any gaps in the data?
- How to modify the code so that Highcharts graph does not cover fixed navigation bar at the top of the page?
- How to show the transition in highchart series graph without refreshing the html webpage?
- How to make a rendered label in Highcharts always visible and still relative to the point clicked or hovered over
- How to change the point color to red that is lowest point plotted in the graph and 2nd issue is animation effect is not supporting in the ie10,ie8
- How to highlight and show tooltip for correct (left / right) step point instead of the closest point
- HIGHCHARTS - Given a series with UNIX stamps and values pairs for the data, how do I show only the date for the first and last point on xAxis?
- How to get Highcharts X-Axis Categories starting at the left most point
- How to show a column with the value Zero in Column chart in Highcharts?
- How to make stacked column graph to show total data value on top
- How to show plot lines in the legend in Highcharts?
- How to show gridlines only on 0 on the yAxis in highcharts?
- append point in the middle of graph
- How do I set highcharts line graph point colors to an array of colors?
- How can I show the label next to the bar in r highcharter?
- How to show the numbers on the y-axis by 1 on HighCharts?
- Highcharts: How to provide a custom stack label in highcharts bar graph from within the stackLabel formatter?
- how to show the remaining percent of Bar in Highcharts?
- How to add point to the beginning of series, Highcharts
- How to show the json data in Pie chart HighChart?
- How to get the highlighted point from shared tooltip formatter, Highcharts
- How show all tooltips split in graph with many series
- Highcharts : How do I keep the marker formatting and make the click event fire with a 5K+ point scatter plot?
- How to show Legends for all the series data in stacked column chart Highcharts?
- how to change the point format for drill down in pie charts?
More Query from same tag
- Highcharts update graph from array data
- Unable to change Spiderweb in Highchart line color
- stop redrawing chart on highcharts
- AngularJS Directive Applying Wrong Data
- Highcharts datalabels with gradient color
- change dataLabels on highcharts based on color of bar
- color in legend with range highcharts
- Reactive charts with Meteor : d3charts , Hightcharts , ChartJS , other?
- how to dynamically update series data using ember-highcharts
- Highchart columnrange with scrollbar
- How to set tooltip border color from series in Highcharts
- Negative bar chart of highcharts in chartjs
- Highcharts Scatter Plot - How to Fix Overlapping Data Labels?
- HighCharts.StockChart tooltip lables on hover of datapoints is incorrect
- How to add new chart(any charts, highcharts or d3 charts) in Serenity admin dashboard
- Highcharts -> how to add vertical title to bar? how to make the symbol in the legend a rectangle?
- angular2-highcharts: update rendered chart data
- highcharts rangeSelectorZoom label
- I have no direct access to code but wonder if I can append my chart data points to a log file
- Highcharts display scrollbar when zooming
- How I can stick together the lines on the Highcharts timeline chart?
- Can I set HighChart startOnTick/EndOnTick dynamically?
- Highcharts: displaying data sets from one series
- Highchart - hide name in legend if no data
- highcharts graph with one regular column and one stacked column
- change highcharts detetime label
- Using Highcharts JS in native mobile application
- Toggling 2nd pane data within a Multiple Series Highcharts Chart
- How to draw disconnected straight lines over a graph?
- highcharts world map not rendering