How to avoid google line chart annotation text cover each other?

Question

I create a horizontal line chart with annotation,but annotation text will cover each other when two point too close,how can I avoid annotation cover each other?? here is my sample chart:

 google.charts.load('current', {packages: ['corechart', 'line']}); google.charts.setOnLoadCallback(drawLogScales); function drawLogScales() { var data = new google.visualization.DataTable(); data.addColumn('number', 'X'); data.addColumn('number', 'Y'); data.addColumn({type:'string', role:'annotation'}); data.addColumn({type:'string', role:'style'}); data.addRows([ [0, 0,'pneumonoultramicroscopicsilicovolcanoconiosis',''], [0, 0,'QAQ',''], [0.1, 0,'ABCDEFG',''], [1, 0,'123',''], ]); var options = {}; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); }

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

thank you

Answer 1

thanks for @WhiteHat advice, finally i found i can create an empty series and shows the annotations:

 google.charts.load('current', {packages: ['corechart', 'line']}); google.charts.setOnLoadCallback(drawLogScales); function drawLogScales() { var data = new google.visualization.DataTable(); data.addColumn('number', 'X'); data.addColumn('number', 'Y'); data.addColumn({type:'string', role:'annotation'}); data.addColumn('number', 'Z'); data.addColumn({type:'string', role:'annotation'}); data.addRows([ [0, 0,'pneumonoultramicroscopicsilicovolcanoconiosis',0,null], [0, 0,null,0,'QAQ'], [0.1,0,null,0,'ABCDEFG'], [1, 0,'123',0,null], ]); var options = {series: {1: {color: '#3366CC',annotations: {stem: {color: '#3366CC',length:30,},},lineWidth: 0,pointSize: 0,},},}; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); }

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