score:1
Accepted answer
You can follow the same approach as icons rendered in the official Activity gauge demo here: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/gauge-activity/
There you will find position calculated using series point shapeArgs
. I modified that function to render labels as you expected. Check it in the demo posted below.
Function code:
function renderLabels() {
var offsetTop = 5,
offsetLeft = 5;
if (!this.series[0].label) {
this.series[0].label = this.renderer
.label('Completed 65%', 0, 0, 'rect', 0, 0, true, true)
.add(this.series[1].group);
}
this.series[0].label.translate(
this.chartWidth / 2 - this.series[0].label.width + offsetLeft,
this.plotHeight / 2 - this.series[0].points[0].shapeArgs.innerR -
(this.series[0].points[0].shapeArgs.r - this.series[0].points[0].shapeArgs.innerR) / 2 + offsetTop
);
if (!this.series[1].label) {
this.series[1].label = this.renderer
.label('Follow-up 45%', 0, 0, 'rect', 0, 0, true, true)
.add(this.series[1].group);
}
this.series[1].label.translate(
this.chartWidth / 2 - this.series[1].label.width + offsetLeft,
this.plotHeight / 2 - this.series[1].points[0].shapeArgs.innerR -
(this.series[1].points[0].shapeArgs.r - this.series[1].points[0].shapeArgs.innerR) / 2 + offsetTop
);
}
Function invocation:
chart: {
type: 'solidgauge',
events: {
render: renderLabels
}
}
Source: stackoverflow.com
Related Query
- Is there a way to calculate custom label position on a Highcharts Activity Gauge?
- How to position a custom label in highcharts
- Is there a way to fill different colors up to the desired point in Highcharts gauge graph?
- The needle in highcharts speedometer gauge is very slow to react to changes in the speed value in an animation is there a way to make it more dynamic?
- How to align centre a custom label in highcharts
- Is there any way to highlight specific node on click | Highcharts Sankey
- (jQuery Highchart) Is there any way to put extra custom data inside Tooltip Box?
- Highcharts: How to provide a custom stack label in highcharts bar graph from within the stackLabel formatter?
- Is there any way we can use Highcharts with mPDF converter?
- Is there any way to fill bubbles partially in highcharts bubble chart?
- Highcharts - How to get default y-Axis label formatter in a custom formatter
- Highcharts - Gauge chart data label not positioning correctly
- Highcharts activity gauge in Shiny
- Is there a way to cap Highchart's Gauge at the max
- Angular Highcharts Custom Legend Label In Area Chart
- Is there any way to assign "Alt" property while using Highcharts
- Highcharts Solid Gauge only want to show 1 data label
- Is there a way to scale the custom marker of a high charts scatter chart?
- How to position axis label in highcharts
- Highcharts Auto Calculate Multiple Series Position
- Is there a better way to (Un)select all LegendItems in HighCharts LineChart?
- Is there a way to change the display value in series using highcharts
- Exporting with custom data label image in highcharts gantt
- In Highcharts drilldown charts, Custom Formatting of X-Axis label displays the label with underline even in the last level
- Remove label from custom Highcharts drawing
- Is there a way to disable mouseover on highcharts entirely?
- Is there a way to pass in variable element ID from Highcharts to launch a modal window?
- Is there any way in Highcharts to auto show Labels/Text on a scatter chart?
- Highcharts Angular gauge - How to remove data label stroke?
- Highcharts custom xAxis label
More Query from same tag
- HTML5 Chart library that supports pinch zooming
- Need drill down with stacked and grouped column chart
- Showing a cross-hair programatically in Highcharts
- Pie Chart keeps loading and never stops
- How do I display multiple charts automatically with PHP and MYSQL?
- Highcharts isn't displaying the data
- Highcharts export server not serving two parallel requests
- HighCharts: show alla y axis on tooltip
- highcharts pie apply a modal for each section
- Data parsing from mysql into highchart with json
- Filling the data gaps with a gray area using Highcharts,
- Highcharts data label on last point of series not displayed
- Remove Highchart line when no value
- Overlapping flags in Highstock
- Highcharts undefined value
- Highcharts tooltips flickering ON IE8
- highcharts how to have loading animation after data update?
- updating high chart on real time in angular js after a particular time
- How to set xAxis maxRange/minRange for each rangeSelector button separately
- Data and tooltip not working for graph using highcharts
- How to remove margin from gauge chart in Highcharts?
- Shiny: Increase highchart size on button click
- Is it possible to have multiple highcharts with one id?
- Multi Series Highchart Data with Multidimensial Array
- Highcharts - Export server not generating image
- Highstock Change tick interval on range selector change
- Highcharts won't display data
- Highcharts check if a series is empty
- Automatically join missing data gaps in Highcharts JS
- How to show an empty chart in beginning and populate values on button click