title: Apexchart bar chart only colors border
body: <p>I have this bar chart. I tried to have each bar a different color, but only the border is colored. How can I make the full bar in that color?</p>
  <p>I tried to use <code>distributed: true</code> but that only colored the borders.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.Apex = {
          chart: {
              foreColor: '#ccc',
              toolbar: {
                  show: false
              },
          },
          stroke: {
              width: 2,
          },
          dataLabels: {
              enabled: false
          },
          tooltip: {
              theme: 'dark'
          },
          grid: {
              borderColor: "#535A6C",
              xaxis: {
                  lines: {
                      show: true
                  }
              }
          }
      };
  var optionsBar = {
          chart: {
              height: 280,
              type: 'bar'
          },
          plotOptions: {
              bar: {
                  columnWidth: '18%',
                  horizontal: true,
                  distributed: true
              },
          },
          colors: ['red', 'orange', 'green', 'orange', 'red'],
          dataLabels: {
              enabled: true,
          },
          series: [{
              name: 'mmol/L',
              data: [14, 25, 50, 10, 1],
          }],
          xaxis: {
              categories: ['&gt; 14.0', '10 - 14.0', '4 - 10', '4 - 3.8', '&lt; 3.8'],
          },
          fill: {
              colors: ['red', 'orange', 'green', 'orange', 'red'],
              type: 'solid',
              opacity: 1
          }
  
      }
  
      var chartBar = new ApexCharts(
          document.querySelector("#barchart"),
          optionsBar
      );
  
      chartBar.render();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: #343E59;
    color: #777;
    font-family: Montserrat, Arial, sans-serif;
  }
  
  .body-bg {
    background: #F3F4FA !important;
  }
  
  .content-area {
    margin: 0 auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.6.12/apexcharts.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.6.12/apexcharts.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js"&gt;&lt;/script&gt;
  &lt;div id="barchart"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>