how to use xrange chart?

[pablosettecase]

Edit: Updated the code below with what I most recently tried.

Greetings! Using Vue 3. I'm trying to figure out how to import and use an xrange chart. I have tried the advice from the docs on "importing highcharts modules" but cannot figure out the correct import and statement and init, and other necessary things like if I need something in the Chart constructor.

I've also tried things in the main.js file and in the component itself.

<template>
   ...
    <Chart :constructor-type="'xrangeChart'" :options="chartOptions" ref="chart"></Chart>
    ...
</template>
<script setup>
  import { Chart } from 'highcharts-vue'
  import Highcharts from 'highcharts'
  import xrange from 'highcharts/modules/xrange'
  xrange(Highcharts)
  const chartOptions = ref({
   chart: {
      type: "xrange",
      ...
   }
</script>

[pablosettecase]

In Chrome console I get error:

App.vue:149 'xrangeChart' constructor-type is incorrect. Sometimes this error is caused by the fact, that the corresponding module wasn't imported.

[jszuminski]

@pablosettecase this seems to work for me with no problems at all:

<template>
  <div>
    <highcharts class="hc" :options="chartOptions" ref="chart"></highcharts>
  </div>
</template>

<script>
import Highcharts from 'highcharts'
import xRange from 'highcharts/modules/xrange'

xRange(Highcharts)

export default {
  data() {
    return {
      chartOptions: {
        chart: {
          type: 'xrange',
        },
        title: {
          text: 'Highcharts X-range',
        },
        accessibility: {
          point: {
            descriptionFormat: '{add index 1}. {yCategory}, {x:%A %e %B %Y} ' + 'to {x2:%A %e %B %Y}.',
          },
        },
        xAxis: {
          type: 'datetime',
        },
        yAxis: {
          title: {
            text: '',
          },
          categories: ['Prototyping', 'Development', 'Testing'],
          reversed: true,
        },
        series: [
          {
            name: 'Project 1',
            // pointPadding: 0,
            // groupPadding: 0,
            borderColor: 'gray',
            pointWidth: 20,
            data: [
              {
                x: Date.UTC(2014, 10, 21),
                x2: Date.UTC(2014, 11, 2),
                y: 0,
                partialFill: 0.25,
              },
              {
                x: Date.UTC(2014, 11, 2),
                x2: Date.UTC(2014, 11, 5),
                y: 1,
              },
              {
                x: Date.UTC(2014, 11, 8),
                x2: Date.UTC(2014, 11, 9),
                y: 2,
              },
              {
                x: Date.UTC(2014, 11, 9),
                x2: Date.UTC(2014, 11, 19),
                y: 1,
              },
              {
                x: Date.UTC(2014, 11, 10),
                x2: Date.UTC(2014, 11, 23),
                y: 2,
              },
            ],
            dataLabels: {
              enabled: true,
            },
          },
        ],
      },
    }
  },
}
</script>

If you'd like me to investigate this issue, please reproduce it in an online code editor.

[pablosettecase]

That worked. Thank you!