I have used the Plotalot extension to create different types of charts on my Joomla site. I am having issues with the margin around the piece charts in particular. I have placed the chart inside a container and although I have made the chart almost the full size of the container it leaves massive margins around the sides and bottom. I'm not quite sure how to reduce this white area around it.
Here is the CSS that I have so far for both the container and the chart, and the code for the chart itself:
#chart_42_container {
clear: right;
float: right;
margin-left: 1px;
width: 577px;
height: 400px;
}
#chart_42 {
height: 398px;
width: 575px;
}
google.load('visualization', '1.0', {packages:['corechart']});
google.setOnLoadCallback(create_chart);
function create_chart() {
window.plotalot_chart_42_data = new google.visualization.DataTable();
window.plotalot_chart_42_data.addColumn('string', 'Labels');
window.plotalot_chart_42_data.addColumn('number', 'Values');
window.plotalot_chart_42_data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
window.plotalot_chart_42_data.addRows(
[['96 Users',96,'<strong>96 Users</strong><br />Criticized the Suction of the Bissell Spotlifter 1716B'],['31 Users',31,'<strong>31 Users</strong><br />Praised the Suction of the Bissell Spotlifter 1716B'],['300 Users',300,'<strong>300 Users</strong><br />Did Not Mention the Suction of the Bissell Spotlifter 1716B in their Review']]);
window.plotalot_chart_42_options = {title:'Breakdown of Comments About the Bissell Spotlifter 1716B\u0027s Suction Capability',backgroundColor:'#ffffff',is3D:true,pieSliceText:'value',legend:{position:'right'}
,tooltip: {isHtml: true}}
window.plotalot_chart_42 = new google.visualization.PieChart(document.getElementById('chart_42'));
window.plotalot_chart_42.draw(window.plotalot_chart_42_data, window.plotalot_chart_42_options);
}
Here's the HTML that I have in the article itself:
<div id="chart_42_container">{plotalot id="42"}
<i>If you're wondering why the total of the three groups displayed in this graphs is greater than the number of reviews we analyzed (425) for the Bissell Spotlifter 1716B, this is because there were 2 reviews that made both positive and negative remarks about this unit's suction.</i>
</div>
I tried to add a comment in italics below the graph in the space below the chart using the <em> tags, but this has been pushed down and overlaps the text in one of the paragraphs.
Here's the section with the piece chart: https://www.reviewminr.com/product-reviews/carpet-cleaner-reviews/bissell-spotlifter-1716b-review#suction
I know it must be possible to reduce these margins somehow as on the Extension's demo site, they have two of these same pie charts with none of these big white margins and they also have the comments in italics right below the the graphs.
Any ideas? Thanks in advance.
change height of chart_42_container
#chart_42_container{height:500px}
then the text will display in the container
the margin has to do with the height of the chart_42
#chart_42{height:398px;}