Chartjs-Multiple horizontal bar charts to display in same row

by

1👍

✅

The v-for and style="display:inline" should be on the <li>, not the <ul>. Otherwise, each chart would be rendered in its own <ul>, which has a default display:block style, rendering the charts on their own line.

<!--
<ul v-for="(data, index) in deliveriesChartDatasets" style="display:inline">
  <li>
-->

<ul>
  <li v-for="(data, index) in deliveriesChartDatasets" style="display:inline">

Also, a styles binding is needed on the HorizontalBarChart to set its display:inline-block and width:

<HorizontalBarChart :styles="barStyles">

export default {
  data() {
    return {
      barStyles: {
        width: '200px',
        position: 'relative',
        display: 'inline-block',
      }
    }
  }
}

demo

Leave a comment