How can I create a Butterfly(Diverging) chart using google charts

Question

I would like to have the same chart with the values on the left side like 6.7, 14.95, 21.65, instead of the negative values. In the google charts documentation there is nothing similar, I looked for several examples but I can't find anything like google charts, only with other api's. Is it possible to get a chart like this with google charts?

 google.charts.load('current', { packages:['corechart'] }).then(function () { var data = google.visualization.arrayToDataTable([ [' ', 'Most Liked', { role: 'style' }, { role: 'annotation' }, 'Most Disliked', { role: 'style' }, { role: 'annotation' }], [' ', 5.30, '#599906', 'lable2', -6.7, '#c91e1e', 'lable3'], [' ', 16.94, '#599906', 'Food', -14.94, '#c91e1e', 'Clealines'], [' ', 20.49, '#599906', 'service', -21.65, '#c91e1e', 'Ambiance'], ]); var view = new google.visualization.DataView(data); view.setColumns([0, 1, 2, 3, 4, 5, 6]); /* columns in data table*/ var options = { chartArea: { left: "3%", top: "10%", width: "94%" }, bar: { groupWidth: "95%" }, legend: { position: "none" }, isStacked: true, /* value responsible for making the normal bar chart as butterfly chart */ hAxis: { format: ';', }, vAxis: { direction: -1 /* value responsible for inverse the bar chart from desending to accending order */ }, animation: { duration: 1000, easing: 'out', startup: true }, annotations: { /* text decoration for labels */ textStyle: { fontSize: 13, bold: true, italic: true, // The color of the text. color: '#871b47', // The color of the text outline. auraColor: '#d799ae', // The transparency of the text. opacity: 0.8 } } }; var chart = new google.visualization.BarChart(document.getElementById('barchart_values')); chart.draw(view, options); });

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="barchart_values"></div>

Answer 1

we can use object notation to provide both the value v: and the formatted f: value

{v: -6.7, f: '6.7'}

this allows the value to plot correctly, and the tooltip to display a positive number.

we can also do the same with the x-axis ticks...

hAxis: {
  format: ';',
  ticks: [{v: -30, f: '30'}, {v: -20, f: '20'}, {v: -10, f: '10'}, 0, 10, 20, 30]
},

see following working snippet...

 google.charts.load('current', { packages:['corechart'] }).then(function () { var data = google.visualization.arrayToDataTable([ [' ', 'Most Liked', { role: 'style' }, { role: 'annotation' }, 'Most Disliked', { role: 'style' }, { role: 'annotation' }], [' ', 5.30, '#599906', 'lable2', {v: -6.7, f: '6.7'}, '#c91e1e', 'lable3'], [' ', 16.94, '#599906', 'Food', {v: -14.94, f: '14.94'}, '#c91e1e', 'Clealines'], [' ', 20.49, '#599906', 'service', {v: -21.65, f: '21.65'}, '#c91e1e', 'Ambiance'], ]); var view = new google.visualization.DataView(data); view.setColumns([0, 1, 2, 3, 4, 5, 6]); /* columns in data table*/ var options = { chartArea: { left: "3%", top: "10%", width: "94%" }, bar: { groupWidth: "95%" }, legend: { position: "none" }, isStacked: true, /* value responsible for making the normal bar chart as butterfly chart */ hAxis: { format: ';', ticks: [{v: -30, f: '30'}, {v: -20, f: '20'}, {v: -10, f: '10'}, 0, 10, 20, 30] }, vAxis: { direction: -1 /* value responsible for inverse the bar chart from desending to accending order */ }, animation: { duration: 1000, easing: 'out', startup: true }, annotations: { /* text decoration for labels */ textStyle: { fontSize: 13, bold: true, italic: true, // The color of the text. color: '#871b47', // The color of the text outline. auraColor: '#d799ae', // The transparency of the text. opacity: 0.8 } } }; var chart = new google.visualization.BarChart(document.getElementById('barchart_values')); chart.draw(view, options); });

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="barchart_values"></div>