How to write your own custom legends for google line chart/ Google line chart legend manipulation

google.charts.load('44', {
  callback: drawChart,
  packages: ['controls', 'corechart']
});

function drawChart() {
  // adapted from a previous example
  var colorPallette = ['#273746','#707B7C','#dc7633','#f1c40f','#1e8449','#2874a6','#6c3483','#922b21'];

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'X');
  data.addColumn('number', 'Y1');
  data.addColumn('number', 'Y2');

  data.addRow([new Date(2016,  0, 1),   1, 123]);
  data.addRow([new Date(2016,  1, 1),   6,  42]);
  data.addRow([new Date(2016,  2, 1),   4,  49]);
  data.addRow([new Date(2016,  3, 1),  23, 486]);
  data.addRow([new Date(2016,  4, 1),  89, 476]);
  data.addRow([new Date(2016,  5, 1),  46, 444]);
  data.addRow([new Date(2016,  6, 1), 178, 442]);
  data.addRow([new Date(2016,  7, 1),  12, 274]);
  data.addRow([new Date(2016,  8, 1), 123, 934]);
  data.addRow([new Date(2016,  9, 1), 144, 145]);
  data.addRow([new Date(2016, 10, 1), 135, 946]);
  data.addRow([new Date(2016, 11, 1), 178, 747]);

  // use view to add various columns for example purposes
  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, 2,
    {
      calc: function (data, row) {
        return data.getValue(row, 1) + data.getValue(row, 2);
      },
      type: 'number',
      label: 'Y3'
    },
    {
      calc: function (data, row) {
        return data.getValue(row, 2) - data.getValue(row, 1);
      },
      type: 'number',
      label: 'Y4'
    },
    {
      calc: function (data, row) {
        return data.getValue(row, 1) * 2;
      },
      type: 'number',
      label: 'Y5'
    },
    {
      calc: function (data, row) {
        return data.getValue(row, 2) * 3;
      },
      type: 'number',
      label: 'Y6'
    },
    {
      calc: function (data, row) {
        return data.getValue(row, 1) * 1.5;
      },
      type: 'number',
      label: 'Y7'
    },
    {
      calc: function (data, row) {
        return data.getValue(row, 1) * 1.5;
      },
      type: 'number',
      label: 'Y8'
    }
  ]);

  var control = new google.visualization.ControlWrapper({
    controlType: 'DateRangeFilter',
    containerId: 'control_div',
    options: {
      filterColumnIndex: 0
    }
  });

  var chart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'chart_div',
    options: {
      chartArea: {
        width: '80%'
      },
      // add colors for legend mapping
      colors: colorPallette,
      hAxis: {
        format: 'MMM',
        slantedText: false,
        maxAlternation: 1
      },
      legend: 'none',
      width: 320
    }
  });

  // add legend marker
  function addLegendMarker(markerProps) {
    var legendMarker = document.getElementById('template-legend-marker').innerHTML;
    for (var handle in markerProps) {
      if (markerProps.hasOwnProperty(handle)) {
        legendMarker = legendMarker.replace('{{' + handle + '}}', markerProps[handle]);
      }
    }
    document.getElementById('legend_div').insertAdjacentHTML('beforeEnd', legendMarker);
  }

  // chart ready event
  google.visualization.events.addListener(chart, 'ready', function () {
    var legend = document.getElementById('legend_div');

    // colors from chart
    var colorPallette = chart.getOption('colors');

    // clear previous legend
    legend.innerHTML = '';

    // add legend marker for each Y axis column - skip X axis --> i = 1
    for (var i = 1; i < chart.getDataTable().getNumberOfColumns(); i++) {
      var markerProps = {};
      markerProps.index = i;
      markerProps.color = colorPallette[i - 1];
      markerProps.label = chart.getDataTable().getColumnLabel(i);
      addLegendMarker(markerProps);
    }

    // add click event to each legend marker
    var markers = legend.getElementsByTagName('DIV');
    Array.prototype.forEach.call(markers, function(marker) {
      marker.addEventListener('click', function (e) {
        var marker = e.target || e.srcElement;
        if (marker.tagName.toUpperCase() !== 'DIV') {
          marker = marker.parentNode;
        }
        var columnIndex = parseInt(marker.getAttribute('data-columnIndex'));
        document.getElementById('message_div').innerHTML = 'legend marker clicked = ' + chart.getDataTable().getColumnLabel(columnIndex);
      }, false);
    });
  });

  var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
  dash.bind([control], [chart]);
  dash.draw(view);
}

#legend_div {
  text-align: center;
  width: 320px;
}

.legend-marker {
  display: inline-block;
  padding: 16px 4px 8px 4px;
}

.legend-marker-color {
  display: inline-block;
  height: 12px;
  width: 12px;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
  <div id="chart_div"></div>
  <div id="legend_div"></div>
  <br/>
  <div id="control_div"></div>
  <br/>
  <div id="message_div"></div>
</div>

<!-- template for building marker -->
<script id="template-legend-marker" type="text/html">
  <div class="legend-marker" data-columnIndex="{{index}}">
    <div class="legend-marker-color" style="background-color: {{color}}"></div>
    <span>{{label}}</span>
  </div>
</script>