title: Two figures in one row using vue-chartjs
body: <p>I use vue-chartjs to display some figures in my vue application in which I use semantic-ui for the layout. </p>
  
  <p>I would like to have two figures next to each other on the screen but somehow I do not manage this.</p>
  
  <p>I tried using template as in my other components but this does not seem to work with vue-chartjs. I also tried to use two fields functionality from semantic ui without success.</p>
  
  <p>Here is some code snippets:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class="DisplayResults"&gt;
      &lt;div class="ui relaxed divided padded full grid"&gt;
        &lt;div class="column"&gt;
          &lt;div class="ui tiny form"&gt;
            &lt;div class="two fields"&gt;
        &lt;div class="field eight wide"&gt;
          &lt;Chart class="Chart" v-model="resultsData" v-if="hasResults" /&gt;
        &lt;/div&gt;
        &lt;div class="field eight wide"&gt;
          &lt;ChartN class="Chart" v-model="resultsData" v-if="hasResults"/&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <pre><code>import Chart from '@/components/Chart.vue'
  import ChartN from '@/components/ChartN.vue'
  import CaseDataState from '@/components/CaseDataState.vue'
  
  export default {
    name: 'DisplayResults',
    CaseDataState,
    components: {
      Chart,
      ChartN
    },
    data: function () {
      return { computing: false }
    },
    computed: {
      hasResults () {
        return (this.resultsData.time) &amp;&amp; !(this.computing)
      },
      resultsData () {
        return CaseDataState.getters.resultsData
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Can anybody help how I can achieve this?</p>