Multiple highcharts in one container

I’ve been trying to put multiple highcharts into one container but I can’t seem to find any examples on how to do it.

The chart looks like this:

<template>
  <highcharts :options="options"></highcharts>
</template>

<script>

import HighchartsVue from 'highcharts-vue'

import Highcharts from 'highcharts'

import highchartsMore from 'highcharts/highcharts-more'

Vue.use(HighchartsVue)

highchartsMore(Highcharts)

export default {
  props: ['options'],
  data() {
return {
}
  }
}
</script>

My main component looks like this:

<template>
  <v-container fluid text-xs-center style="height: 90vh; max-height: 100%;">
     <v-layout row wrap>
      <v-flex xs2>
          <v-card flat>
              <Chart :options="chartOptions"/>
          </v-card>
        </v-flex>
      </v-layout>
  </v-container>
</template>
<script>

import Chart from '../components/Chart.vue'

var testdata = [
          // each slice of the pie gets its own color
          { y: 40, color: '#1DACE8', name: 'test1' },
          { y: 70, color: '#1C366B', name: 'test2' },
          { y: 55, color: '#F24D29', name: 'test3' },
          { y: 53, color: '#E5C4A1', name: 'test4' },
          { y: 95, color: '#C4CFD0', name: 'test5' }
        ]

var testdata2 = [
          // each slice of the pie gets its own color
          { y: 10, color: '#1DACE8', name: '1' },
          { y: 30, color: '#1C366B', name: '2' },
          { y: 45, color: '#F24D29', name: '3' },
          { y: 93, color: '#E5C4A1', name: '4' },
          { y: 15, color: '#C4CFD0', name: '5' }
        ]

export default {
  name: 'chartapp2',
  components: {
  Chart
  },

  data() {
    return {
      chartOptions:{
        chart: {
          polar: true,
          backgroundColor: '#F5F5F5'
},
        exporting: {
            buttons: {
                contextButton: {
                    theme: {
            fill:"#F5F5F5"
        }
                }
            }
        },
title: {
    text: 'City 1'
},

subtitle: {
    text: 'Railacc stuff'
},

pane: {
    startAngle: -22.5},

xAxis: {
    tickInterval: 45,
    min: 0,
    max: 360,
    labels: false
},

yAxis: {
    min: 0,
    tickInterval: 1,
    labels: false
},

plotOptions: {
    series: {
        pointStart: 0,
        pointInterval: 45
    },
    column: {
        pointPadding: 0,
        groupPadding: 0,
        colorByPoint: true
    }
},

tooltip: {
            formatter: function () {
                return this.y, this.point.name;
            }
        },

series: [{
    type: 'column',
    name: '',
    data: testdata,
    pointPlacement: 'between'
},
{
    type: 'column',
    name: '2',
    data: testdata2,
    pointPlacement: 'between'
}]
      },
    }
  }
}
</script>

In theory this should work, but all I see is one chart instead of 2 in one single container.
Any idea on how to make this work?

Thanks

Why exactly do you think you should be seeing two highcharts?

In your example, all I see is one chart component ever defined. So there would only ever be one chart component.

I guess more specifically you are asking why you are only seeing one data series?

That’s my problem. I don’t know how to get two highcharts.
I would like to have something like this https://www.highcharts.com/demo/combo. Where there’s only one legend for multiple graphs. So multiple graphs in one container, but I don’t know how to achieve that.

About one component, well one component can be reused with different data, or am I wrong?

you can try it https://www.runoob.com/highcharts/highcharts-combinations-column.html