title: How to write your own custom legends for google line chart/ Google line chart legend manipulation
body: <p>I am using Google Visualisation to create line charts for my application. I have following requirements in that :</p>
  
  <ol>
  <li>Manipulating events on legends (like doubleClick, which I have
      solved somehow)</li>
  <li>Wrapping the legends in two rows avoiding pagination (Most imp and required)</li>
  </ol>
  
  <p>I have gone through the following questions to get solution for my answers:
  1) <a href="https://stackoverflow.com/questions/4244102/issue-with-legend-pagination-google-interactive-chart-api">Issue with legend pagination (Google Interactive chart API)</a>
  Issue : I would avoid playing with font-size because the number of legends may increase over time</p>
  
  <p>2)<a href="https://stackoverflow.com/questions/12745229/how-the-legends-on-google-charts-can-be-wrapped">How the legends on Google charts can be wrapped</a>
  Issue: I do not want legends to be anywhere else than at the position:bottom. And maxLines solution does not work on position : bottom</p>
  
  <p>3) <a href="https://stackoverflow.com/questions/9802522/is-there-any-way-i-can-avoid-pagination-in-legends-of-a-google-visualisation-cha">Is there any way I can avoid pagination in legends of a google visualisation chart and show all the lines in two lines in a single page?</a>
  Issue: This is another link, which mentions my problem, but no useful answers found on it.</p>
  
  <p>4) Google Documentation : 
  Heading : Chart Legend Text and Style chdl, chdlp, chdls [All charts]
  <a href="https://developers.google.com/chart/image/docs/chart_params#axis-label-styles-chxs" rel="noreferrer">https://developers.google.com/chart/image/docs/chart_params#axis-label-styles-chxs</a>
  Heading : Setting Chart Margines
  <a href="https://developers.google.com/chart/image/docs/chart_params#chart-margins-chma-all----charts" rel="noreferrer">https://developers.google.com/chart/image/docs/chart_params#chart-margins-chma-all----charts</a>
  Heading : Tooltips
  <a href="https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#tooltips-an-introduction" rel="noreferrer">https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#tooltips-an-introduction</a>
  Comment : These are few google documentation links where few legend manipulating properties are mentioned, but still they does not solve my problem.</p>
  
  <p>5)<a href="https://github.com/google/google-visualization-issues/issues/1286" rel="noreferrer">https://github.com/google/google-visualization-issues/issues/1286</a>
  Comment : This is the link where I can see that, google has not provided many properties to manipulate legends, and no much useful information to solve my issue</p>
  
  <p>6) <a href="https://stackoverflow.com/questions/7804129/google-charts-legend-manipulation">Google charts legend manipulation</a>
  Comment : This is the only link, where I got a hint about how to solve my issue i.e. writing own legends. But there is no more links provided for documentation, no jsFiddle or no ref links apart from one link which is not useful for me.</p>
  
  <p>While gone through all these, I can see only solution to solve my problem is to write my own custom legends. But I have no idea about how to write a complete element adding to google API.</p>
  
  <p>Please guide me to go through this, any suggestions/links/refs/hints are welcome.</p>
  
  <p>Thank you.</p>