Google Donut Chart (Visualization) - Percentage greater than 100 - charts

Question

I am creating a donut chart using Google Visualization. Its an Monthly Revenue Goal chart. e.g. let say goal is set 1000 and 800 is the revenue then 80% will be shown as completed and 20% as remaining.
What I want to do is that if revenue is 2000 then 200% should be shown. (Visually it can not be greater than 100 (whole donut) , I just want to see the 200%.
Is this possible?

Answer 1

we can use the formatted value to display anything we need.
first, we need to set the following config option, to display the value of the data table column.
pieSliceText: 'value'
then when loading the data table, we use object notation to provide the formatted value, where v: is the value, and f: is the formatted value.
{v: 2000, f: '2,000 - 200%'}
with the config option above, we can display anything...
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['category', 'amount'],
['goal', 1000],
['revenue', {v: 2000, f: '2,000 - 200%'}],
]);
var options = {
pieHole: 0.4,
pieSliceText: 'value'
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
#chart_div {
height: 600px;
width: 800px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
NOTE: but you may need to disable or provide a custom tooltip to match...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['category', 'amount', {role: 'tooltip', type: 'string'}],
['goal', 1000, '1,000'],
['revenue', {v: 2000, f: '2,000 - 200%'}, '2,000 - 200%'],
]);
var options = {
pieHole: 0.4,
pieSliceText: 'value'
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
#chart_div {
height: 600px;
width: 800px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>