How to set the legend icons of a google line chart as lines not squares - google-visualization

Question

I've been trying to figure out how the first chart in this JSFiddle has the legend icons as lines instead of squares. Compared to the line chart legend here which has squares as icons. I think it has something to do with the x axis being a date, but that doesn't seem to work for my data. Does anyone know how to explicitly set the icons of a google line chart legend as lines and not squares?
These are the chart options for the correctly displaying line chart:
var classicOptions = {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
width: 900,
height: 500,
// Gives each series an axis that matches the vAxes number below.
series: {
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1}
},
vAxes: {
// Adds titles to each axis.
0: {title: 'Temps (Celsius)'},
1: {title: 'Daylight'}
},
hAxis: {
ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
new Date(2014, 4), new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
]
},
vAxis: {
viewWindow: {
max: 30
}
},
legend: {position: 'bottom'}
};

Answer 1

In fact, if you are using the latest version (v1.1) of google.visualization.LineChart then the legend is rendered using line style as demonstrated below.
Example
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="chart" style="width: 640px; height: 480px"></div>
In prevision version the legend is rendered as a boxed icons.
Example
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.0','packages':['corechart']}]}"></script>
<div id="chart" style="width: 640px; height: 480px"></div>
Note: the only difference between two examples is the version of
library
Regarding customizing the chart legend.
According to Configuration Options the following legend properties could be customized:
alignment Alignment of the legend
maxLines Maximum number of lines in the legend
position Position of the legend
textStyle An object that specifies the legend text style.
Since there is no property that specifies icon style, in order to create a more customized legend would be to disable chart legend and create a custom one using html/css.