How to use TreeMap using HighChart-vue

Question

I've HighchartsVue in my project and i want to use TreeMap.

In application.js following configuration are:

import HighchartsVue from 'highcharts-vue';

setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(HighchartsVue)
      .use(FloatingVue)
      .mount(el);
  }

I'm able to use Bar, Line, Colume charts etc. But now i want to configure TreeMap chart and getting this error:

Error: Highcharts error #13: www.highcharts.com/errors/13/
    at Object.<anonymous> (chunk-63ZCELNG.js?v=4197c962:74:21)
    at E (chunk-63ZCELNG.js?v=4197c962:223:42)
    at f2 (chunk-63ZCELNG.js?v=4197c962:72:11)
    at a2.getContainer (chunk-63ZCELNG.js?v=4197c962:5808:19)
    at a2.firstRender (chunk-63ZCELNG.js?v=4197c962:6084:18)
    at a2.<anonymous> (chunk-63ZCELNG.js?v=4197c962:5596:20)
    at E (chunk-63ZCELNG.js?v=4197c962:223:42)
    at a2.init (chunk-63ZCELNG.js?v=4197c962:5559:13)
    at a2.getArgs (chunk-63ZCELNG.js?v=4197c962:5555:62)
    at new a2 (chunk-63ZCELNG.js?v=4197c962:5545:18)

I have use this option but still not working,

<template>
  <div>
    <Highcharts :options="chartOptions" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import HighchartsVue from 'highcharts-vue';
import Highcharts from 'highcharts';
import treemap from 'highcharts/modules/treemap';

treemap(Highcharts);

const chartOptions = ref({
  chart: {
    type: 'treemap'
  },
  series: [{
    data: [{
      name: 'A',
      value: 10
    }, {
      name: 'B',
      value: 7
    }]
  }]
});
</script>

Answer 1

You're getting Highcharts error #13 which means that the rendering div was not found. Make sure that you're rendering chart to the right div element.

About importing treemap module, here's example code:

import App from './App.vue'
import Vue from 'vue'
import Highcharts from 'highcharts'
import Treemap from 'highcharts/modules/treemap'
import HighchartsVue from 'highcharts-vue'

Vue.use(Highcharts, Treemap, HighchartsVue)

Vue.config.productionTip = false

// add the module by passing highcharts to it
Treemap(Highcharts)

new Vue({
 render: h => h(App),
}).$mount('#app')

Here are the docs: https://github.com/highcharts/highcharts-vue#importing-highcharts-modules

Answer 2

In it's own file.

import Highcharts from 'highcharts';
import treeMap from 'highcharts/modules/treemap';

if (typeof Highcharts === 'object') {
  treeMap(Highcharts);
}

onMounted(() => {
  Highcharts.chart('treemap', treeMapChartOptions.value);
});