Google Visualizations (Charts) API: Change which axis the legend uses?

Question

See here: https://jsfiddle.net/1cLpukxx/1/

As you can see, the legend is the Density value. I think that's because all I'm doing is this:

legend: { position: "right" }

I'd like the legend to be the elements, with the colour that they are in the charts.

I feel like this should be easy, however I haven't found it in any examples (using the x-axis legend as the side-legend). I feel like this is because I don't know what to search for but I digress...

Answer 1

The style column used in the example overrides the legend, which is why the position is set to --> 'none'

One option would be to change the rows to columns, as in the following example.
This creates separate series and allows setting an array for colors in the configuration options.
However, this causes other issues, such as the spacing of the columns.

 google.charts.load("current", { callback: drawChart, packages: ['corechart'] }); function drawChart() { var data = google.visualization.arrayToDataTable([ ["Metal", "Copper", "Silver", "Gold", "Platinum"], ["Copper", 8.94, null, null, null], ["Silver", null, 10.49, null, null], ["Gold", null, null, 19.30, null], ["Platinum", null, null, null, 21.45] ]); var view = new google.visualization.DataView(data); view.setColumns([ 0, 1, {calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"}, 2, {calc: "stringify", sourceColumn: 2, type: "string", role: "annotation"}, 3, {calc: "stringify", sourceColumn: 3, type: "string", role: "annotation"}, 4, {calc: "stringify", sourceColumn: 4, type: "string", role: "annotation"}, ]); var options = { title: "Density of Precious Metals, in g/cm^3", width: 600, height: 400, legend: {alignment: "right"}, colors: ['#b87333', 'silver', 'gold', '#e5e4e2'] }; var chart = new google.visualization.ColumnChart(document.getElementById("chart_div")); chart.draw(view, options); }

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>