I am using google charts, which shows the stacked bar chart. I tried groupwidth, but help well increasing the width.
Any help is much appreciated.
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['name', 'data1', 'data2','data3'],
['w1', 40,20,40],
['w2', 40,20,40],
['w2', 40,20,40],
['w2', 40,20,40], ['w2', 40,20,40],
['w2', 40,20,40], ['w2', 40,20,40],
['w2', 40,20,40],
]);
var options = {title: 'Percentage of Risk', isStacked:true,bar: {width:"200%",height:"1200%",gap:"10%"}};
// Instantiate and draw the chart.
var chart = new google.visualization.BarChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);#container {
width: 550px; height: 1200px; margin: 0 auto
}<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = ".js"></script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container">
</div>
</body>
</html>I am using google charts, which shows the stacked bar chart. I tried groupwidth, but help well increasing the width.
Any help is much appreciated.
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['name', 'data1', 'data2','data3'],
['w1', 40,20,40],
['w2', 40,20,40],
['w2', 40,20,40],
['w2', 40,20,40], ['w2', 40,20,40],
['w2', 40,20,40], ['w2', 40,20,40],
['w2', 40,20,40],
]);
var options = {title: 'Percentage of Risk', isStacked:true,bar: {width:"200%",height:"1200%",gap:"10%"}};
// Instantiate and draw the chart.
var chart = new google.visualization.BarChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);#container {
width: 550px; height: 1200px; margin: 0 auto
}<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic./charts/loader.js"></script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container">
</div>
</body>
</html>- svg g:nth-of-type(3) rect g > g:nth-of-type(2) rect :nth-of-type(2) { translateY:125px; } svg g:nth-of-type(3) rect g > g:nth-of-type(2) rect :nth-of-type(3) { translateY:145px; } like that....... – yjs Commented Mar 16, 2018 at 13:01
- could you please write it clearly – Riya Commented Mar 16, 2018 at 13:03
- Wele to StackOverflow. If you have pure HTML/CSS/Javascript code, you can add it to your question using the "Javascript/HTML/CSS snippet" tool while editing/writing your question. You should not post your code to another site and link it as an ment. – Philipp Maurer Commented Mar 16, 2018 at 15:10
2 Answers
Reset to default 2To increase the width of a group of bars in Google Charts, you have to use the groupWidth configuration.
The syntax for this configuration is:
bar: {groupWidth: '100%'}
which is placed in the chart options variable.
So for your specific code it would be:
var options = {title: 'Percentage of Risk',
isStacked:true,
bar: {groupWidth: '100%'}};
The width of the group of bars can be specified as pixels, for example 75 or as a percentage such as 50%. For the percentage data type, 100% means no space between the bars.
Official documentation for charts configurations: https://developers.google./chart/interactive/docs/gallery/columnchart#configuration-options
If you want to increase width then you should try this, I have also put in my code:
<script>
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Chart data
var data = google.visualization.arrayToDataTable([
['SALES', 'FINANCIAL YEAR'],
['FY-16',100],
['FY-17', 230],
['FY-18', 520],
['FY-19', 940],
['FY-20', 1400],
['FY-21', 2000]
]);
//Chart Custom Options
var options = {
title: 'SALES',
vAxis: { title: 'SALES', ticks: [0, 200, 400, 600, 800, 1000, 1200,1400,1600,1800,2000,2200] },
hAxis: { title: 'FINANCIAL YEAR' },
seriesType: 'bars',
colors: ['#f58a07'],
legend: { position: 'bottom', maxLines: 2, pagingTextStyle: { color: '#374a6f' }, scrollArrows: { activeColor: '#666', inactiveColor: '#ccc' } },
series: { 1: { pointSize: 2, type: 'line' } },
animation: {
duration: 1000,
easing: 'linear',
startup: true
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
$(window).resize(function () {
drawVisualization();
});
</script>`enter code here`
----------
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="chart_div" class="chart"></div>
</div>
</div>
</div>
----------
<style type="text/css">
.chart {
width: 100%;
min-height: 500px;
}
@media(max-width: 667px) {
.chart {
width: 350px;
min-height: 400px;
}
}
</style>