title: ChartJS bar chart with legend which corresponds to each bar
body: <p>I'm trying to understand the ChartJS documentation on their bar chart. It doesn't make a log of sense to me as the label at the top in once sense looks as though it applies to just the first bar (based on color) and in another sense, the entire chart (it is the only label that's not in a tooltip and it is front and center)</p>
  
  <p><a href="https://i.stack.imgur.com/zieYf.png" rel="noreferrer"><img src="https://i.stack.imgur.com/zieYf.png" alt="bar chart demo"></a></p>
  
  <p>I've been struggling to make it more like their line chart, which shows a legend with a label and a colored square related to each line on the chart. (they haven't got an example of a multiline chart, but it does work like this).</p>
  
  <p>The labels property within the data object gets translated to the value next to the bar, eg <code>labels: ['36%', '10%', '18%', '34%', '0%', '2%']</code>
  <a href="https://i.stack.imgur.com/AxNJb.png" rel="noreferrer"><img src="https://i.stack.imgur.com/AxNJb.png" alt="bar chart fail"></a></p>
  
  <p>I want a legend at the top that indicates the aqua color is apples, the grey is oranges, the green is pears, etc, but the closest I've come is providing <code>data.datasets</code> an array of objects and making labels and array, which only results in groups of bars, like the example <a href="https://codepen.io/SitePoint/pen/XjAjaG?editors=1010" rel="noreferrer">here</a>. </p>