title: legend alignment in bar graph using chartist
body: <p>I am trying to create legends for a bar chart using chartist, i have used chartist plugin for legend, but i am not able to align it to the bottom of the chart, can anyone provide inputs on how to customise .
  (i have tried using it in css, but not able to reflect my changes.)</p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;chartist class="ct-chart ct-major-twelfth"
      chartist-chart-type="Bar"
      chartist-data="chartData"
      chartist-chart-options="chartOptions"&gt;
  &lt;/chartist&gt;
  </code></pre>
  
  <p>JS: </p>
  
  <pre><code>chartData = {
      labels: [],
      series: [[]]
  };
  
  chartOptions= {
      plugins: [
          Chartist.plugins.legend()
      ]
  };
  </code></pre>
  
  <p>legend.JS : </p>
  
  <pre><code> $ct-series-colors: (#d70206, #F05B4F, #F4C63D, #453D3F) !default;
  
  .ct-legend {
      position: relative;
      z-index: 10;
  
      li {
          position: relative;
          padding-left: 23px;
          margin-bottom: 3px;
      }
  
      li:before {
          width: 12px;
          height: 12px;
          position: absolute;
          left: 0;
          content: '';
          border: 3px solid transparent;
          border-radius: 2px;
      }
  
      li.inactive:before {
          background: transparent;
      }
  
      &amp;.ct-legend-inside {
          position: absolute;
          top: 0;
          right: 0;
      }
  
      @for $i from 0 to length($ct-series-colors) {
          .ct-series-#{$i}:before {
              background-color: nth($ct-series-colors, $i + 1);
              border-color: nth($ct-series-colors, $i + 1);
          }
      }
  }
  </code></pre>
  
  <p>also can anyone let me know how to add y-axis values on top of bars.i tried using below css file but still unable to get labels (similar to Chartist.plugins.ctPointLabels) but seems it is applicable only to line chart.</p>
  
  <p>CSS:</p>
  
  <pre><code>.ct-chart .ct-bar {
    stroke-width: 60px;
  }
  
  .ct-chart .ct-label, .ct-chart .ct-label.ct-horizontal {
    text-align: center;
  }
  
  .ct-bar-label {
    text-anchor: middle;
    alignment-baseline: hanging;
    fill: white;
  }
  </code></pre>
  
  <p>Thanks in advance.</p>