Search code examples
javascripthtmljquerygoogle-visualizationgoogle-chat

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


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


Solution

  • 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>