score:1
Accepted answer
it's possible with highcharts
, documentation
e.g.
$(function () {
data = [{
valsecond: 25,
valfirst: 62.5
}];
// build the data arrays
var seconddata = [];
var firstdata = [];
for (var i = 0; i < data.length; i++) {
// add second data
seconddata.push({
name: "second",
y: data[i].valsecond,
color: "#00ff00"
});
// add first data
firstdata.push({
name: "first",
y: data[i].valfirst,
color:'#ff0000'
});
}
// create the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: ''
},
plotoptions: {
pie: {
animation: false,
shadow: false,
center: ['50%', '50%']
}
},
tooltip: {
valuesuffix: '%'
},
series: [{
name: 'second',
data: seconddata,
size: '30%',
startangle: 270,
endangle: 360,
innersize: '20%'
}, {
name: 'first',
color:'#ffffff',
data: firstdata,
size: '80%',
startangle: 0,
endangle: 225,
innersize: '60%',
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>
score:1
in the highcharts you can adapt donut chart http://www.highcharts.com/demo/pie-donut, remove connectors, set usehtml for datalabels and rotate by css / rotation svg element. missing elements can by added by renderer.
Source: stackoverflow.com
Related Query
- Double donut-like chart with negative values
- Highcharts: having trouble recreating stacked area chart from Excel with positive and negative values
- Highcharts - Area Chart - Stacking with series containing negative and positive values
- Column chart with negative values and categories on xAxis in HighCharts
- Highcharts - Pie chart with negative values
- Highcharts - Keep Zero Centered on Y-Axis with Negative Values
- Highcharts - best way to handle and display zero (or negative) values in a line chart series with logarithmic Y axis
- Highcharts Column chart with drilldown, remove hyperlink like formatting from x-axis labels
- Highcharts - Column With Negative Values - Column Color
- Highcharts - Issue with negative values when displaying multiple axes
- Highcharts - Negative color with 'line' type polar chart
- Creating negative stacking bar chart with Highcharter(Likert chart)
- logarithmic chart with 0 values
- Setting data with null values doesn't remove dots from the chart
- how to display the title in the middle of a donut chart with legend?(react-highcharts)
- how to develop custom chart with box annotations as like attached image
- Heat Map With Red Color Range For Negative Values And Green Color Range For Positive Values
- highcharts donut chart center text overlaps with tooltip
- Highcharts vertical stacked bar chart with negative values, is it possible?
- jQuery Highcharts double donut chart (donut within donut)
- Highcharts - Cannot set x-axes categories in column charts with negative values
- Highcharts gantt chart : Task progress indicator need to show a single task for various status like completed,inprogress etc with different colors
- How to display the total of the series values for a donut chart in Highcharts?
- Highcharts - draw line chart with summed values but show breakup on hover
- Array split with the help of object categories values of array- Javascript - High Chart
- Highcharts - Dealing with small values in Funnel chart
- How to draw a bar chart that one series has both positive and negative values in Highcharts?
- highcharts lollipop/dumbbell chart change position/colour of positive and negative marker values
- Highcharts Semi Donut Pie with Negative Percentage
- HighCharts: How to draw a straight line in multiple axes like plotLines with fixed X-axis with different values
More Query from same tag
- highcharts animation multiple spline per second
- HighChat Heatmap: Tooltip
- Highcharts how to use JavaScript variable as series data source?
- Highcharts, influxdb and nodejs, how to display data of influxdb in highcharts using influxdb-nodejs?
- How do I skip a datapoint in Highcharts without causing an interruption in the line of the chart?
- Change marker width and height in scatter chart
- How to get continuous graphs in Highstock (beta release)
- how to parse json into highcharts
- Symbol-outline with pie chart -or- custom legend symbols
- D3Js donut chart, avoid label text overlay's
- Highcharts memory leak when using jQuery 2.X
- How do I make a Highcharts timeline where the labels don't overlap and none are hidden?
- Drag Sensitivity in ParallelCoordinates with Drag and Drop
- Highcharts push chart to left of subtitle
- Highcharts fixed / floating axis
- Highcharts draw grid lines into yAxis area
- highcharts zooming over line charts not working properly
- Highcharts data from Google spreadsheet show line chart for one series
- MySQL Timestamp to JavaScript Date not converting correctly
- JS HighCharts.js Pie data in different format
- How remove zero values in a heatmap?
- highcharts - Draw horizontal line outside the chart area
- Highcharts multiple series and axes types overlapping
- Highstock step multiple data points on same x axis
- How do I remove padding from both sides of Highcharts area category chart?
- highcharts datetime x-axis custom formatting
- Highcharts speedometer gauge change label
- why foreach doesn't work inside my highchart and when i splet the array it works?
- Column Highchart not zooming in all the way
- groupPadding for stacking series in Highcharts