multiple horizontal bar charts to display in same row

Question

I am using vue chart js with chart js 2.9.4 plugging and created 4 horizontal bar chars. All of them are currently displayed one after the another in different rows. How can I show them all in same row.

    <ul v-for="(data, index) in deliveriesChartDatasets" style="display:inline">
      <li>
      <HorizontalBarChart
        :datasets="data"
        :show-legend="true"
      />
      </li>
    </ul>

As in above if I render this it will show 4 graphs row wise. But I need to show all of the 4 graphs in same line. Is there any way to change the width of the graph or do something?

Answer 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