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
- Highchart label rotation makes my column dissappear
- Highcharts - Stacked bar chart - Remove axis
- force Highcharts redraw animation when changing graph type
- Highcharts Stacked Columns Labels on Top
- Highcharts : Shared Tooltip for non-matching x values
- HighCharts Bar graph: Showing Bar Value when hovering the mouse
- How to place a chart not from the beginning of the X axis
- How to remove white background on a simple bar chart?
- How to draw arrows on a pie-chart with Highcharts?
- Highcharts stacked percentage area
- Can't assign names to legend points
- Highcharts form submit var not working
- Keep selection in highcharts even on page refresh
- C#JSON serialization
- Pie Chart connected to a mysql database (Using Highcharts)
- Inserting Highcharts bar graph into sharepoint 2013 page
- Highcharts Exporting multiple Pie Charts
- Highcharts: set regular intervals on xaxis
- Highcharts synchronized charts to show crosshair when snap is false
- Highcharts add button fix chart
- Highcharts / Highmaps drilldown on init
- Highcharts halo in inside how?
- reuse of same object of chart in highcharts to minimize coding
- Plotting Global variable Highcharts
- highchart combine pie and spiderweb
- highcharts dataLabel overflow: justify issue
- Understand variable assigment in JS
- Need help in simplifying the code to synchronise tooltips and crosshairs for Highcharts,
- Is it possible to have the category displayed above the series in a horizontal bar jsHighchart?
- Highchart StockChart - Update last point value