Highcharts Error #17 (Vue.js), in columnrange series

1
votes

I'm trying to display a columnrange chart in a Vue.js application using Highcharts, but I'm getting Highcharts Error #17 (The requested series type does not exist).

I've installed [email protected], [email protected], and [email protected] via npm.

Here are my imports:

import HighchartsVue from 'highcharts-vue'
import Highcharts from 'highcharts'
import HighchartsMore from 'highcharts/highcharts-more'

HighchartsMore(Highcharts)

Vue.use(HighchartsVue)

And here is a snippet of my chart:

let div_id = 'chart_' + id;
let chart = {
    renderTo: div_id,
    type: 'columnrange',
    zoomType: 'xy',
    inverted: true
};
let title = 'Chart Title';

...

$('#charts').append('<div id="' + div_id + '"></div>');
let display_chart = new Highcharts.Chart({
    chart: chart,
    title: title,
    ....
});

I expect to see a columnrange chart but am instead seeing Highcharts Error #17 (The requested series type does not exist) despite importing highcharts-more.

When I replace the columnrange chart with a regular line chart, everything works just fine.

Update: Embarassingly, I've discovered my issue. 'columnrage' is, in fact, not the same as 'columnrange'. I don't know who to credit with the correct answer because the probably presented was caused by my own typographical error that I missed over and over and over again.

Thank you all for the help!

2
vue.jshighcharts
how are you initializing and using Vue? Not sure why are you using jquery for selecting, you might not need jquery while using Vuejs – calmar
I'm not certain what you mean when you ask how I'm initializing and using Vue. As for jquery, the eventual intent is to create and display charts dynamically based on user input and jquery is a familiar way to create elements on the fly. – Justin

2 Answers

1
votes

Look at the example below, you have to initialize your data using Vue environment. The chart is mounted inside your component. You might not need jquery here. 

Vue.use(HighchartsVue.default)

var app = new Vue({
  el: "#app",
  data() {
    return {
      chartOptions: {
        chart: {
          type: 'spline'
        },
        title: {
          text: 'Series'
        },
        series: [{
          data: [1,5,6,7]
        }]
      },
      dataSeries: '1,5,6,7'
    }
  },
  watch: {
    dataSeries(newValue) {
      if (newValue) {
        this.chartOptions.series[0].data = newValue.split(',').map(a => Number(a))
      }

    }
  }
})
.title-row {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hchart {
    height: 100%;
    width: 100%;
    position: absolute;
}
body,html {
 margin: 0;
 padding: 0;
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts-more.js"></script>

<script type="text/javascript" src="https://cdn.rawgit.com/highcharts/highcharts-vue/1ce7e656/dist/script-tag/highcharts-vue.min.js"></script>


<div id="app">
  <div class="title-row">
    <p>Insert data series, comma separated</p>
    <input type="text" v-model="dataSeries">
  </div>
    <highcharts class="hchart":options="chartOptions"></highcharts>
</div>
0
votes

Try to change the import order like that :

// Highcharts 1st
import Highcharts from 'highcharts';

// then all Highcharts modules you will need
import HighchartsMore from 'highcharts/highcharts-more';
HighchartsMore(Highcharts);
import dataModule from 'highcharts/modules/data';
dataModule(Highcharts);
...

// finally the Vue wrapper
import HighchartsVue from 'highcharts-vue';
Vue.use(HighchartsVue);