score:1
I'm not sure if this is what you want: see example at jsfiddle
End angle is calculated as proportion of 45*180/100 = 81. So, end angle is at -9.
startAngle: -90,
endAngle: -9,
center: ['50%', '75%']
And data is only one value:
data: [
['Firefox', 45.0]
]
And tooltip is changed to show 45% instead of 100%
tooltip: {
pointFormat: '{series.name}: <b>{point.y:.1f}%</b>'
},
Update: Used idea from @Mark to calculate endData
using input data
(see Mark's comment in his answer). Added also variable for startAngle
. See update at jsfiddle:
var data = 45;
var startAngle = -90;
var endAngle = (data/100 * 180) + startAngle;
endAngle = endAngle == 0 ? 0.01 : endAngle;
...
startAngle: startAngle,
endAngle: endAngle,
...
data: [
['Firefox', data]
...
score:1
Not to steal @AntoJurković's thunder but his idea in the comment is the simplest way to accomplish what you want.
Here's an example fiddle.
The important parts are:
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '50%',
data: [
{y: 45, name: 'Firefox'},
{y: 55, color: 'transparent',dataLabels:{enabled: false}} // instead of the background color, use transparent, and disable dataLabels
]
}]
and
tooltip: {
formatter: function(){
if (this.point.color == "transparent") {
return false; // suppress the tooltips if it has no color
} else {
return this.series.name + ':<b>' + this.point.percentage +'%</b>';
}
}
},
Source: stackoverflow.com
Related Query
- HighCharts - Pie Semi Circle (Arrow in Chart)
- How to create an inner circle pie chart in Highcharts
- Highcharts server side rendering draw a mysterious semi circle donut shape
- HighCharts Semi Circle dial that positions correctly
- Highcharts display label for pie chart using html table as data source
- Highcharts Semi Donut Pie with Negative Percentage
- Highcharts pie chart outer circle
- Highchart Semi Circle With Gauge Chart. Shrink pie chart and move gauge up
- Highcharts - Pie inner circle size
- GWT Highcharts - Semi circle donut
- Yii highcharts draw semi circle
- How to display the value instead of percentage in a pie chart using jquery Highcharts
- HighCharts - Make the pie chart 100% of the div
- Place text in center of pie chart - Highcharts
- How to hide labels in the highcharts in the pie
- Displaying percentage inside pie item for highcharts
- Highcharts Pie Chart.How to set labels in two lines
- Highcharts - labels inside and outside a pie chart
- Highcharts Pie charts get the selected pie id
- How can I remove the white border from HighCharts pie chart?
- Highcharts Pie Chart ignores percentageDecimals tooltip setting and has floating point inaccuracy issue
- Highcharts pie chart dynamically changes size
- Highcharts not displaying data labels for Pie chart in arabic
- Total of values in HighCharts Pie Chart
- HighCharts Pie Chart - Add text inside each slice
- highcharts - chart names for multiple pie chart series in one chart
- Highcharts pie dataLabels inside and outside
- How to hide a highcharts pie slice programatically
- Highcharts Pie Chart Drilldown not showing on third drill
- Add additional data to Pie Tooltip on Highcharts
More Query from same tag
- Chart not being displayed using DotNet.HighCharts and WebForms
- Angular Highcharts-ng how to set additional data series as tooltip
- How to display a Bar Chart in DataTable
- HighCharts: Annotation on X axis?
- dotnet highchart error, not showing data
- Time format with Highcharts
- Highcharts combine pie chart with a scatter chart
- Can I have a chart automatically size the height (rather than using 400px) using the Highcharts .NET Wrapper?
- How to hide 0 values in multi chart in highcharts?
- How to update/add Highchart options/properties after the chart/object has been created?
- MACD + High chart Graph plotting issue
- Highcharts --- Change sliced color on drilldown pie chart
- from Google Visualization Datatable to Highcharts data format
- Highcharts: how to assign different colours to a spline depending on positive or negative slope?
- Group series names in columns in highchart horizontal legend
- Adding Default values to x Axis
- ReferenceError: HighCharts is not defined
- Chart Title overlapping on chart
- Highcharts Series Margins
- highstock strange behavior scrollbar
- Configure Highstock export server in Play framework (java) 1.2.5
- Adding a custom drop down to highstock range selector menu
- Highcharts drilldown doesn't work for 3+ levels
- Populating highchart line with array of objects
- Gauge chart in ng2-highcharts
- Highcharts Donutchart: Avoid showing duplicate legend with nested charts
- How to show the path that I have traversed in highcharts drilldown chart?
- Highcharts: regular interval for irregular data
- How can I disable tooltips during selection?
- Render from/to areas in Highcharts line chart