Removing lines at the edge of Column / Bar Charts

20 views
Skip to first unread message

Arghya chakroborty

unread,
Apr 4, 2017, 11:03:26 AM4/4/17
to Google Visualization API
Hi,

I am trying to put a line chart and a column chart atop each other. Their x-axis is same and they are related as well.

Problem is, they are not "exactly" aligned with each other. While the line chart doesn't have any leading and trailing lines outside chart area , the Column chart has those little ones. That's the reason , even though their chart area is exactly the same , they don't align.

Here is the code for Column Chart :
---------------------------------------------------
        var options = {
        title: '# SPRs Resolved Each Week',
        chartArea:{
        top:'10%',
        left:40,
        width:'100%',
        height:'80%'
        },
        colors:['#696969'
          ,'#00B0F0'
                 ,'#FF8585'],
                explorer: { 
                actions: ['dragToZoom', 'rightClickToReset']
                },
                legend : {position: 'in', textStyle: {color: 'black', fontSize: 12}},
        hAxis: { 
        ticks: ticksArray,
        slantedText: true
        },
        isStacked: true
        };

        var chart = new google.visualization.ColumnChart(document.getElementById("div1"));
        chart.draw(data, options);


And the code for Line Chart :
--------------------------------------------

var options = {
        title: 'Open SPR Trends',
        titleTextStyle: {
        bold: true,
        color: 'black',
        fontSize: 13
        },
        explorer: { 
        actions: ['dragToZoom', 'rightClickToReset']
        },
        chartArea:{top:'10%',left:40,width:'100%',height:'80%'},
        hAxis: { 
        ticks: ticksArray,
        slantedText: true
        },
        legend: {
        position: 'in',
        textStyle: {
        fontSize: 12
        }
        },
        series: [
                {color: '#00B0F0'}, 
                {color: '#FF8585'}, 
                {color: '#92D050'},
                {color: '#FF8585', lineWidth : 4},
                {color: '#92D050', lineWidth : 4}
        ]
        };

        var chart = new google.visualization.LineChart(document.getElementById('div2'));
        chart.draw(data, options);

PFA the charts as in my web page.

Any suggestions / help is much appreciated !!!

Regards,
Arghya
Google_Charts.jpg

Daniel LaLiberte

unread,
Apr 4, 2017, 12:23:17 PM4/4/17
to Google Visualization API
In addition to the chartArea, the top-level height and width options make a difference for how the charts will align.  

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/57b5c46d-4658-44cb-aa50-3f08baa1cf68%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

Arghya chakroborty

unread,
Apr 4, 2017, 1:14:43 PM4/4/17
to Google Visualization API
Hi Daniel,

Thanks for responding.... but height and width of divs in which the charts get displayed , are also same ......
To post to this group, send email to google-visua...@googlegroups.com.



--

Daniel LaLiberte

unread,
Apr 4, 2017, 1:25:02 PM4/4/17
to Google Visualization API
Ok, the last issue to resolve is that because the ColumnChart draws each bar centered on domain values, with half to the left and half to the right, an extra half-bar-width (computed from the smallest domain value separation) is automatically added to the min and max of the domain axis viewWindow so the left and right end-most bars will not be cut off.  To control this, and align your two charts, you should either force the viewWindow for the ColumnChart to be smaller, or force the viewWindow for the LineChart to be larger by the same amount. 

Hi Daniel,

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.



--

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.

Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/bce54327-3f2e-455d-99cc-cfef327b1e87%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--
Reply all
Reply to author
Forward
0 new messages