I have been attempting to create a donut pie chart similar to the one shown below.
The main challenge I am facing is with the outer strip. How can I achieve this effect?
Your guidance in the right direction would be greatly appreciated.
https://i.sstatic.net/QP02A.png
While I am currently using flotchart, I am open to exploring other options if you can provide some insight.
This is the progress I have made so far:
<div id="report_score_summary" class="chart" style="height:303px;width:100%">
<script>
data_score_summary = [
{ label: "Description Score", data: 20, color: '#BA2B6B' },
{ label: "Image Score", data: 30, color: '#375EAB' },
{ label: "Header Score", data: 50, color: '#4BB748' },
{ label: "Content Score", data: 10, color: '#F6871E' },
{ label: "Title Score", data: 18, color: '#E1DC3A' },
{ label: "Free", data: 16, color: '#E6E5E3' }
];
$.plot(report_score_summary, data_score_summary, {
series: {
pie: {
innerRadius: 0.5,
show: true
}
}
});
setCode([
"$ .plot('# report_score_summary', data_score_summary, {",
" series: {",
" pie: {",
" innerRadius: 0.5,",
" show: true",
" }",
" }",
" });"
]);
</script>
</div>
You can also view it on jsfiddle.