Develop Reference

Google Charts - aligning Combo Chart data maximally to left and right

I have a combo chart containing area, bars and line graphs. I'd like the area and line charts to align maximally to the left and right side. For bars chart it's not required. Unfortunately I'm unable to align the graphs properly. I went through the documentation and couldn't find a solution to my problem.
Current chart:
Expected chart:
Here is the GoogleChartInterface object of the chart (I'm adding dataTable and ticks dynamically):
{
chartType: 'ComboChart',
dataTable: [],
options: {
focusTarget: 'category',
animation: {
startup: true,
easing: 'out',
duration: 500,
},
height: '160',
chartArea: {
width: '90%',
height: '79%',
},
vAxes: {
0: {
titlePosition: 'none',
textStyle: {
color: '#febd02',
bold: true,
fontSize: 13,
},
format: '#',
gridlines: {
color: '#eaeaea',
count: '5',
},
interpolateNulls: true,
},
1: {
titlePosition: 'none',
format: '#',
gridlines: {
color: 'transparent'
},
interpolateNulls: true,
},
2: {
groupWidth: '100%',
titlePosition: 'none',
textStyle: {
color: '#0284ff',
bold: true,
fontSize: 13,
},
format: 'decimal',
gridlines: {
color: 'transparent'
},
},
},
hAxis: {
textStyle: {
color: '#393939',
bold: true,
fontSize: 13,
},
format: 'EEEE',
gridlines: {
count: 0,
color: 'transparent'
},
ticks: [],
},
series: {
0: {
targetAxisIndex: 0,
type: 'area',
},
1: {
type: 'line'
},
2: {
targetAxisIndex: 2,
type: 'bars',
dataOpacity: 0.5,
},
},
colors: [
'#febd02',
'#a5a5a5',
'#0284ff',
],
bar: {
groupWidth: '35'
},
legend: {
position: 'none'
},
},
};

in order to stretch the area and line series to the edges of the chart,
we must first use a data type that will render a continuous x-axis.
in this case, we will use date time.
next, we use option hAxis.viewWindow to control where the series start and end.
viewWindow has two properties, min & max.
the values of min & max should match the data type of the x-axis.
in this case, we set the values to the dates where the series should begin and end.
hAxis: {
viewWindow: {
min: new Date(2020, 10, 13),
max: new Date(2020, 10, 19)
}
}
this will stretch the series to the edges of the chart.
see following working snippet for an example...
google.charts.load('current', {
packages: ['controls', 'corechart']
}).then(function() {
var data = google.visualization.arrayToDataTable([
['Date', 'y0', 'y1', 'y2'],
[new Date(2020, 10, 13), 100, 50, 25],
[new Date(2020, 10, 14), 110, 45, 5],
[new Date(2020, 10, 15), 90, 40, 60],
[new Date(2020, 10, 16), 80, 30, 10],
[new Date(2020, 10, 17), 70, 20, 0],
[new Date(2020, 10, 18), 60, 10, 0],
[new Date(2020, 10, 19), 50, 5, 0]
]);
var chart = new google.visualization.ChartWrapper({
chartType: 'ComboChart',
containerId: 'chart',
dataTable: data,
options: {
focusTarget: 'category',
animation: {
startup: true,
easing: 'out',
duration: 500,
},
chartArea: {
left: 60,
top: 12,
right: 60,
bottom: 72,
height: '100%',
width: '100%'
},
height: '100%',
width: '100%',
vAxes: {
0: {
titlePosition: 'none',
textStyle: {
color: '#febd02',
bold: true,
fontSize: 13,
},
format: '#',
gridlines: {
color: '#eaeaea',
count: '5',
},
interpolateNulls: true,
},
1: {
titlePosition: 'none',
format: '#',
gridlines: {
color: 'transparent'
},
interpolateNulls: true,
},
2: {
groupWidth: '100%',
titlePosition: 'none',
textStyle: {
color: '#0284ff',
bold: true,
fontSize: 13,
},
format: 'decimal',
gridlines: {
color: 'transparent'
},
},
},
hAxis: {
textStyle: {
color: '#393939',
bold: true,
fontSize: 13,
},
format: 'dd MMM. yyyy',
gridlines: {
color: 'transparent'
},
ticks: data.getDistinctValues(0),
viewWindow: data.getColumnRange(0)
},
series: {
0: {
targetAxisIndex: 0,
type: 'area',
},
1: {
type: 'line'
},
2: {
targetAxisIndex: 2,
type: 'bars',
dataOpacity: 0.5,
},
},
colors: [
'#febd02',
'#a5a5a5',
'#0284ff',
],
bar: {
groupWidth: '35'
},
legend: {
position: 'none'
},
},
});
chart.draw();
});
html, body {
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#chart {
min-height: 160px;
height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

How can draw tick related style like major tick, tick-length, position, color in react-google-charts

This picture can help to understand my problem. Need an orange tick.

in the data table used to draw the chart,
we can use a hidden series with an annotation role.
data.addColumn('string', 'x');
data.addColumn('number', 'y');
data.addColumn('number', 'hidden series');
data.addColumn({type:'string', role:'annotation'});
we use a value of zero for the hidden series.
this will place the annotation on the x-axis.
and we give the annotation a value, such as 'A', so the annotation is drawn.
to draw the orange tick, and hide the annotation value,
we use the following annotation options...
annotations: {
boxStyle: {
fill: '#f57c00',
stroke: '#f57c00',
strokeWidth: 1
},
stem: {
length: 0
},
textStyle: {
color: 'transparent',
fontSize: 16
},
},
you can use fontSize to change the size of the annotation.
to prevent the hidden series from being drawn,
we use the following options...
series: {
1: {
color: 'transparent',
visibleInLegend: false,
enableInteractivity: false
}
},
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'y');
data.addColumn('number', 'hidden series');
data.addColumn({type:'string', role:'annotation'});
data.addRows([
['2010-01-01', 10, 0, 'A'],
['2012-01-01', 4, 0, 'A'],
['2014-01-01', 26, 0, 'A'],
['2016-01-01', 50, 0, 'A'],
['2018-01-01', 75, 0, 'A']
]);
var options = {
annotations: {
boxStyle: {
fill: '#f57c00',
stroke: '#f57c00',
strokeWidth: 1
},
stem: {
length: 0
},
textStyle: {
color: 'transparent',
fontSize: 12
},
},
chartArea: {
left: 80,
top: 56,
right: 32,
bottom: 80,
height: '100%',
width: '100%'
},
hAxis: {
title: 'Date'
},
height: '100%',
legend: {
position: 'none'
},
series: {
1: {
color: 'transparent',
visibleInLegend: false,
enableInteractivity: false
}
},
title: 'value vs. Date',
vAxis: {
title: 'value'
},
width: '100%'
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
window.addEventListener('resize', function () {
chart.draw(data, options);
});
chart.draw(data, options);
});
html, body {
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#chart {
height: 100%;
min-height: 400px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
EDIT
another option is to draw square points at each tick location,
as suggested by #dlaliberte
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'y');
data.addColumn('number', 'tick series');
data.addRows([
['2010-01-01', 10, 0],
['2012-01-01', 4, 0],
['2014-01-01', 26, 0],
['2016-01-01', 50, 0],
['2018-01-01', 75, 0]
]);
var options = {
chartArea: {
left: 80,
top: 56,
right: 32,
bottom: 80,
height: '100%',
width: '100%'
},
hAxis: {
title: 'Date'
},
height: '100%',
legend: {
position: 'none'
},
series: {
1: {
color: '#f57c00',
lineWidth: 0,
pointSize: 12,
pointShape: 'square',
visibleInLegend: false,
enableInteractivity: false
}
},
title: 'value vs. Date',
vAxis: {
title: 'value'
},
width: '100%'
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
window.addEventListener('resize', function () {
chart.draw(data, options);
});
chart.draw(data, options);
});
html, body {
height: 100%;
margin: 0px 0px 0px 0px;
overflow: hidden;
padding: 0px 0px 0px 0px;
}
#chart {
height: 100%;
min-height: 400px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

BarChart with Stacked & Group

I have prepared google 'bar' chart as below its working properly.how can i change direction of bar form vertical to horizontal ?
I tried to change direction of chart Using vAxis: {direction:-1} but not working.
I tried to get solution from google chart sites but i cant found any other solution for horizontal bar chart with Stacked & Group. Is there any other way to change direction of Google 'bar' Chart ?
<html>
<title>Web Page Design</title>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350],
['2017', 1030, 540, 350]
]);
var options = {
isStacked: true,pointSize: 15,
vAxis: {
viewWindow: {
min: 0,
}
},
legend: {
position:'bottom',
textStyle: {
bold: false,
fontSize: 12,
}
},
is3D: true,
vAxes: {
0:{
title: 'value in lac'
},
1: {
gridlines: {
color: 'transparent'
},
textStyle: {
color: 'transparent'
}
},
2: {
gridlines: {
color: 'transparent'
},
textStyle: {
color: 'transparent'
}
},
},
series: {
0: {
targetAxisIndex: 0,
color:'#2A6DDA'
},
1: {
targetAxisIndex: 1,
color:'#FF5733'
},
2: {
targetAxisIndex: 1,
color:'#FFC300'
},
3: {
targetAxisIndex: 1,
color:'#D3A4FA'
},
},
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="columnchart_material" runat="server" style="width: 600px; height: 500px;">
</div>
</body>
</html>

Here is how Google charts does it on their examples page
What you need is to use 'corecharts' instead of 'bars', then change the call to google.visualization.BarChart() and you'll get the horizontal bars.
<html>
<title>Web Page Design</title>
<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([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350],
['2017', 1030, 540, 350]
]);
var options = {
isStacked: true,
pointSize: 15,
vAxis: {
viewWindow: {
min: 0,
}
},
legend: {
position: 'bottom',
textStyle: {
bold: false,
fontSize: 12,
}
},
is3D: true,
vAxes: {
0: {
title: 'value in lac'
},
1: {
gridlines: {
color: 'transparent'
},
textStyle: {
color: 'transparent'
}
},
2: {
gridlines: {
color: 'transparent'
},
textStyle: {
color: 'transparent'
}
},
},
series: {
0: {
targetAxisIndex: 0,
color: '#2A6DDA'
},
1: {
targetAxisIndex: 1,
color: '#FF5733'
},
2: {
targetAxisIndex: 1,
color: '#FFC300'
},
3: {
targetAxisIndex: 1,
color: '#D3A4FA'
},
},
};
var chart = new google.visualization.BarChart(document.getElementById("columnchart_material"));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="columnchart_material" runat="server" style="width: 600px; height: 500px;">
</div>
</body>
</html>

Google Charts how do I hide the value = 0

Is it possible to hide null values on hAxis?
or better to set pointSize: 0 when the point is on the hAxis
if yes, which Option?
I tried a ComboChart
function drawChart() {
var jsonData = $.ajax({
url: "getData.php",
dataType: "json",
async: false
}).responseText;
var options = {
width: 2500,
height: 1080,
legend: { position: 'top', maxLines: 10 },
bar: { groupWidth: '75%' },
isStacked: true,
title: '15-tägiger Wettbewerb, 17.01.2018 - 06.02.2018',
titlePosition: 'out',
colors: ['green', '#e6693e', 'blue'],
backgroundColor: 'white',
tooltip: { trigger: 'selection' },
legend: { position: 'none' },
vAxis: { viewWindowMode:'explicit', viewWindow: { max: 130}},
seriesType: 'bars',
series: { 3: {type: 'scatter', pointSize: 30, color: 'black'},
4: {type: 'scatter', pointSize: 30, color: 'black'},
5: {type: 'scatter', pointSize: 30, color: 'black'},
6: {type: 'scatter', pointSize: 30, color: 'black'},
},
pointShape: 'star',
};
var data = new google.visualization.DataTable(jsonData);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

just a little confused, title says hide 0, but question says hide null...
but if you use null instead of 0, then the star will not appear...
['', 2, 4, null, null, null, null, null], // <-- star will NOT appear
['', 2, 4, 0, 0, 0, 0, 0], // <-- star will appear at the bottom
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var jsonData = [
['', 2, 4, null, null, null, null, null],
['', 2, 4, 0, 0, 0, 0, 0],
];
var options = {
//width: 2500,
//height: 1080,
legend: { position: 'top', maxLines: 10 },
bar: { groupWidth: '75%' },
isStacked: true,
title: '15-tägiger Wettbewerb, 17.01.2018 - 06.02.2018',
titlePosition: 'out',
colors: ['green', '#e6693e', 'blue'],
backgroundColor: 'white',
tooltip: { trigger: 'selection' },
legend: { position: 'none' },
vAxis: { viewWindowMode:'explicit', viewWindow: { max: 130}},
seriesType: 'bars',
series: {
3: {type: 'scatter', pointSize: 30, color: 'black'},
4: {type: 'scatter', pointSize: 30, color: 'black'},
5: {type: 'scatter', pointSize: 30, color: 'black'},
6: {type: 'scatter', pointSize: 30, color: 'black'},
},
pointShape: 'star',
};
var data = google.visualization.arrayToDataTable(jsonData, true);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
you can use a data view with calculated columns to change zero to null,
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var jsonData = [
['', 2, 4, null, null, null, null, null],
['', 2, 4, 0, 0, 0, 0, 0],
];
var options = {
//width: 2500,
//height: 1080,
legend: { position: 'top', maxLines: 10 },
bar: { groupWidth: '75%' },
isStacked: true,
title: '15-tägiger Wettbewerb, 17.01.2018 - 06.02.2018',
titlePosition: 'out',
colors: ['green', '#e6693e', 'blue'],
backgroundColor: 'white',
tooltip: { trigger: 'selection' },
legend: { position: 'none' },
vAxis: { viewWindowMode:'explicit', viewWindow: { max: 130}},
seriesType: 'bars',
series: {
3: {type: 'scatter', pointSize: 30, color: 'black'},
4: {type: 'scatter', pointSize: 30, color: 'black'},
5: {type: 'scatter', pointSize: 30, color: 'black'},
6: {type: 'scatter', pointSize: 30, color: 'black'},
},
pointShape: 'star',
};
var data = google.visualization.arrayToDataTable(jsonData, true);
// build view
var view = new google.visualization.DataView(data);
var viewColumns = [];
$.each(new Array(data.getNumberOfColumns()), function (col) {
viewColumns.push({
calc: function (dt, row) {
var value = dt.getValue(row, col);
if (value === 0) {
value = null;
}
return value;
},
label: data.getColumnLabel(col),
type: data.getColumnType(col)
});
});
view.setColumns(viewColumns);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
// draw view
chart.draw(view, options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Different Color Bars for Flot Categories Bar Chart

How can you have a different color for each bar when using the "categories" mode in Flot?
This code makes every bar the first color in colors array. I'd like each bar to be the corresponding color in the colors array.
Current code:
var data = [["Red",1],["Yellow",2],["Green",3]];
$.plot("#placeholder1div",[data], {
series: {
bars: {
show: true,
barWidth: 0.3,
align: "center",
lineWidth: 0,
fill:.75
}
},
xaxis: {
mode: "categories",
},
colors: ["#FF0000","#FFFF00","#00FF00"]
});

As is often my recommendation with Flot, drop the plugin and configure it up youself.
// separate your 3 bars into 3 series, color is a series level option
var data = [{data: [[0,1]], color: "red"},
{data: [[1,2]], color: "yellow"},
{data: [[2,3]], color: "green"}];
$.plot("#placeholder",data, {
series: {
bars: {
show: true,
barWidth: 0.3,
align: "center",
lineWidth: 0,
fill:.75
}
},
xaxis: {
// drop the categories plugin and label the ticks yourself
// you'll thank me in the long run
ticks: [[0,"Red"],[1,"Yellow"],[2,"Green"]]
}
});
Running code:
var data = [{data: [[0,1]], color: "red"},
{data: [[1,2]], color: "yellow"},
{data: [[2,3]], color: "green"}];
$.plot("#placeholder",data, {
series: {
bars: {
show: true,
barWidth: 0.3,
align: "center",
lineWidth: 0,
fill:.75
}
},
xaxis: {
ticks: [[0,"Red"],[1,"Yellow"],[2,"Green"]]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script>
<div id="placeholder" style="width:400px; height: 300px"></div>

When you put your data you must to put the colors inside:
var data = [
{color: '#ff00aa', data: [[0, 1]]},
{color: 'red', data: [[1, 1]]},
{color: 'yellow', data: [[2, 2],[3, 2]]},
{color: 'orange', data: [[4, 2]]},
{color: 'blue', data: [[5, 4],[6, 7]]},
{color: '#000000', data: [[7, 1]]}
];

Use below configuration
// Colors
var color01 = '#00cde2';
var color02 = '#ffb700';
var color03 = '#7ac70c';
var color04 = '#313541';
var color05 = '#fc3232';
var color06 = '#1cb0f6';
var color07 = '#00c07f';
var data = [
{data: [[0, 4.1]], color: color01},
{data: [[1, 1.8]], color: color02},
{data: [[2, 2]], color: color03},
{data: [[3, 4.5]], color: color04},
{data: [[4, 3.7]], color: color05},
{data: [[5, 5.6]], color: color06},
{data: [[6, 2.6]], color: color07}
];
$.plot($("#placeholder"), data, {
series: {
lines: {
fill: false
},
points: {show: false},
bars: {
show: true,
align: 'center',
barWidth: 0.5,
fill: 1,
lineWidth: 1
}
},
xaxis: {
tickLength: 0,
ticks: [
[0, "Data One"],
[1, "Data Two"],
[2, "Data Three"],
[3, "Data Four"],
[4, "Data Five"],
[5, "Data Six"],
[6, "Data Seven"]]
},
yaxis: {
min: 0
},
grid: {
hoverable: true,
backgroundColor: {
colors: ["#fff", "#fff"]
},
borderWidth: {
top: 1,
right: 1,
bottom: 2,
left: 2
},
borderColor: {
top: "#e5e5e5",
right: "#e5e5e5",
bottom: "#a5b2c0",
left: "#a5b2c0"
}
}
});
#import 'https://fonts.googleapis.com/css?family=Open+Sans';
#placeholder{
font-family: 'Open Sans', sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<div id="placeholder" style="width:100%; height: 300px"></div>