ARTICLE AD BOX
I am using google charts and I need to chart pos/neg values with annotations. The negative annotations show up by the axis.
Is there a way to switch the -0.95 annotation to below the blue column?
User Whitehat solved this issue for a Bar Chart: Moving annotations on Bar Chart with Negative Values Google Chart
I've tried modifying the code to adjust for a Column Chart, but have been unsuccessful. Any help is greatly appreciated.
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', { callback: function () { var data = new google.visualization.DataTable({ cols: [ { label: 'x', type: 'string' }, { label: 'y0', type: 'number' }, ], rows: [ { c: [{ v: 'Omega' }, { v: -0.95 }] }, { c: [{ v: 'Large' }, { v: -1.92 }] }, { c: [{ v: 'Medium' }, { v: 2.76 }] }, { c: [{ v: 'Tiny' }, { v: 2.03 }] } ] }); var options = { annotations: { alwaysOutside: true, stem: { color: 'transparent' }, textStyle: { color: '#000000' } }, // WHITEHAT // hAxis: { viewWindow: { min: data.getColumnRange(1).min - 1 } }, vAxis: { viewWindow: { min: data.getColumnRange(1).min - 3 } }, legend: { position: 'none' } }; var view = new google.visualization.DataView(data); view.setColumns([ 0, 1, { calc: 'stringify', sourceColumn: 1, type: 'string', role: 'annotation' } ]); var container = document.getElementById('chart'); // WHITEHAT // var chart = new google.visualization.BarChart(container); var chart = new google.visualization.ColumnChart(container); // move annotations var observer = new MutationObserver(function () { $.each($('text[text-anchor="start"]'), function (index, label) { var labelValue = parseFloat($(label).text()); // only negative -- and -- not on tooltip if ((labelValue < 0) && ($(label).attr('font-weight') !== 'bold')) { var bounds = label.getBBox(); var chartLayout = chart.getChartLayoutInterface(); // WHITEHAT // $(label).attr('x', chartLayout.getXLocation(labelValue) - bounds.width - 8); $(label).attr('y', chartLayout.getYLocation(labelValue) + bounds.height + 8); } }); }); observer.observe(container, { childList: true, subtree: true }); chart.draw(view, options); }, packages: ['corechart'] }); </script> </head> <body> <div id="chart" style="width: 500px; height: 300px;"></div> </body>