How do I remove the horizontal white lines between these stacked columns?
Here is my code:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Genre', 'One', 'Two'],
['2010', 10, 24],
['2020', 16, 22]
]);
var options = {
width: 300,
height: 200,
legend: 'none',
bar: { groupWidth: '100%' },
isStacked: true,
series: {
0: { color: '#40a1ec' },
1: { color: '#ff8888'}
},
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
I know how to remove the vertical white space between bars (using groupWidth), but I can't find a way to remove the horizontal white lines.
Thanks!
I think the only way is to add CSS style to columns so that stroke is not null:
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Genre', 'One', { role: 'style' }, 'Two', { role: 'style' } ],
['2010', 10, 'stroke-width: 1;stroke-color: blue;', 24,'stroke-width: 1;stroke-color: red;'],
['2020', 16, 'stroke-width: 1;stroke-color: blue;', 22, 'stroke-width: 1;stroke-color: red;']
]);
var options = {
width: 400,
height: 400,
legend: 'none',
bar: {
groupWidth: '100%'
},
isStacked: true,
series: {
0: {color: '#40a1ec'},
1: {color: '#ff8888'}
}
};
var chart = new google.visualization.ColumnChart(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>
Related
I'm trying to make a donut chart like below using google chart library:
I found this article that makes half donut, but didn't find the code to create the one in my image.
Can anyone help?
Read here https://developers.google.com/chart/interactive/docs/gallery/piechart#removing-slices
It simply says donut charts are just pie charts with pieHole values between 0 and 1. To remove some slices, it says
To omit a slice, change the color to 'transparent':
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Pac Man', 'Percentage'],
['', 75],
['', 25]
]);
var options = {
legend: 'none',
pieSliceText: 'none',
pieHole: 0.4,
pieStartAngle: 0,
pieEndAngle: 180,
tooltip: { trigger: 'none' },
slices: {
0: { color: 'yellow' },
1: { color: 'transparent' }
}
};
var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
chart.draw(data, options);
}
Use pieSliceText and pieStartAngle with an empty data field;
google.charts.load('visualization', '1.1', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
const data = google.visualization.arrayToDataTable([
['Skils', 'Skills level'],
['React', 6],
['HTML', 4],
['PHP', 2],
[null, 12]
]);
new google.visualization.PieChart(document.getElementById('chart_div')).
draw(data, {
title: "My Skills",
slices: {
3: {
color: 'transparent'
}
},
pieHole: 0.5,
width: 600,
height: 600,
pieSliceText: 'value',
pieStartAngle: 270,
});
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I ran into the problem of implementing graphics via google chart, it is necessary to make a three sectional diagram, please tell me how to do it better.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Effort', 'Amount given'],
['My all', 100],
['My alsl', 100],
['My alsl', 100],
]);
var options = {
pieHole: 0.85,
tooltip: { trigger: 'none' },
pieSliceText: 'none',
pieSliceTextStyle: {
color: 'transparent',
},
legend: 'none',
slices: {
0: { color: '#f9b231' },
1: { color: '#7e430f' },
2: { color: '#f8d597' }
}
};
var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donut_single" style="width: 900px; height: 500px;"></div>
How can i add different colors to Bars in Column chart. Adding colors field in option is not working. Please help.
Below is the code snippet:
tdata.addRow([col1, arr[0].Manual])
tdata.addRow([col2, arr[0].Auto]);
tdata.addRow([col3, arr[0].Amount]);
options = {
fontSize: 12,
height: 430,
width: 380,
chartArea: { left: "25%", top: "20%", right: "5%", bottom: "10%" },
backgroundColor: '#f5f5f5',
title: 'Project',
pieSliceText: 'value',
colors: ['red', 'green', 'blue'],
'is3D': true
};
var chart = new google.visualization.ColumnChart(document.getElementById('drilldown_div'));
chart.draw(tdata, options);
return false;
the colors option applies colors to each series
so if you have 3 colors
you would need 3 y-axis columns
as follows...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x', 'y0', 'y1', 'y2'],
['A', 100, 120, 130]
]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {
colors: ['red', 'green', 'blue']
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
to color individual columns within a series,
use a 'style' column role
as follows...
note: using a 'style' column role will invalidate the legend
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x', 'y', {role: 'style', type: 'string'}],
['A', 100, 'red'],
['B', 120, 'green'],
['C', 130, 'blue']
]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {
legend: 'none'
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
This is answer according to google document, use color property instead of background color.
var options = { width: 400, height: 240, title: 'Toppings I Like On My Pizza', colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'] };
chart.draw(data, options);
you can find more here
How can i add different colors to Bars in Column chart. Adding colors field in option is not working. Please help.
Below is the code snippet:
tdata.addRow([col1, arr[0].Manual])
tdata.addRow([col2, arr[0].Auto]);
tdata.addRow([col3, arr[0].Amount]);
options = {
fontSize: 12,
height: 430,
width: 380,
chartArea: { left: "25%", top: "20%", right: "5%", bottom: "10%" },
backgroundColor: '#f5f5f5',
title: 'Project',
pieSliceText: 'value',
colors: ['red', 'green', 'blue'],
'is3D': true
};
var chart = new google.visualization.ColumnChart(document.getElementById('drilldown_div'));
chart.draw(tdata, options);
return false;
the colors option applies colors to each series
so if you have 3 colors
you would need 3 y-axis columns
as follows...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x', 'y0', 'y1', 'y2'],
['A', 100, 120, 130]
]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {
colors: ['red', 'green', 'blue']
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
to color individual columns within a series,
use a 'style' column role
as follows...
note: using a 'style' column role will invalidate the legend
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x', 'y', {role: 'style', type: 'string'}],
['A', 100, 'red'],
['B', 120, 'green'],
['C', 130, 'blue']
]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {
legend: 'none'
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
This is answer according to google document, use color property instead of background color.
var options = { width: 400, height: 240, title: 'Toppings I Like On My Pizza', colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'] };
chart.draw(data, options);
you can find more here
I cannot seem to wrap my label for my column chart. I tried fiddling around with the options but it doesn't make any difference.
This is my current chart view, as you can see the label for column 2 has completely disappeared as the column 1 label has overlapped:
this is my Column Chart View:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", { packages: ["bar"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = google.visualization.arrayToDataTable([
['Faculty Name', 'Book', 'Book Chapter', 'Journal Article', 'Conference'],
#Html.Raw(rows)]);
var options = {
title: '',
'width': 800,
'height': 500
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data1, options);
}
</script>
<div id="columnchart_material" style="width: 800px; height: 500px;"></div>
You can reduce the font size down to 11 to get the label to show...
var options = {
'title': '',
'width': 800,
'height': 500,
'hAxis': {'textStyle': {'fontSize': 11}}
};
To do so, you will need to convert your options...
chart.draw(data1, google.charts.Bar.convertOptions(options));
you may draw a classical ColumnChart (when it is an option):
google.load("visualization", "1.1", {
packages: ["corechart"]
});
google.load("visualization", "1.1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = google.visualization.arrayToDataTable([
['Faculty Name', 'Book', 'Book Chapter', 'Journal Article', 'Conference'],
['Commerce, Law and Managment', 4, 9, 9, 1],
['foobar',2,2,2,3],
['Health Sciences', 0,2,3,1],
['Humanities', 0, 1, 1, 0],
['Science', 0, 0, 0, 1]
]);
var options = {
title: '',
'width': 800,
'height': 500,
vAxis: {
gridlines: {
count: 10
}
}
};
var chart = new google.visualization
.ColumnChart(document.getElementById('columnchart_material'));
chart.draw(data1, options);
}
<div id="columnchart_material" style="width: 800px; height: 500px;"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>