getting error#17 from highcharts while using solid gauge from backbone rails

5
votes

I am trying to use "solidgauge" chart from highcharts in backboneJS. Previously I had used a VU meter and it was working correctly. When I used solid gauge I am getting highcharts#17 error. As per this error either I am giving series.type or chart.type wrong else I don't have the necessary extension files. I have loaded the "highcharts.js", "highcharts-more.js", "highcharts-3d.js" and "exporting.js" files and the sibling VU meter worked.So i think there is something wrong with my chart options but can't seem to figure out what that is.Here is my chart configuration and I am giving the data for the series dynamically.I am using coffeescript.

scoreCard :
 chart: 
  type: 'solidgauge'
 title: null
 pane: 
  center: ['50%', '85%']
  size: '140%'
  startAngle: -90
  endAngle: 90
  background: 
   backgroundColor: (Highcharts.theme &&                 Highcharts.theme.background2) || '#EEE'
   innerRadius: '60%'
   outerRadius: '100%'
   shape: 'arc'
 tooltip:
   enabled: false
 yAxis: 
   min: 0
   max: 100
   stops: [
        [10, '#55BF3B'] 
        [60, '#DDDF0D'] 
        [90, '#DF5353'] 
  ]
   lineWidth: 0,
   minorTickInterval: null,
   tickPixelInterval: 400,
   tickWidth: 0,
   title: 
     y: -70
   labels: 
     y: 16

 plotOptions: 
   solidgauge: 
     dataLabels: 
       y: 5
       borderWidth: 0
       useHTML: true
 credits:
  enabled: false
 series: [
   {
    name: "Pulse value"
   }
 ]

I cant seem to figure out whether the fault is because of the chart configuration or any missing header file. Can anyone please help?

2
ruby-on-railsbackbone.jshighcharts

2 Answers

8
votes

The solidgauge type has its own module that needs to be included, it's not part of the highcharts-more.js file.

As seen in the demo for the solidgauge chart:

Files and reference:

5
votes

I got the same problem. I fixed adding the following statements

import * as ChartModuleMore from 'highcharts/highcharts-more.js';
import HCSoldGauge from 'highcharts/modules/solid-gauge';
import Highcharts from 'highcharts'


ChartModuleMore(Highcharts);
HCSoldGauge(Highcharts);

Don't forget to add the files references:

  <script src="../node_modules/highcharts/highcharts.js"></script>
  <script src="../node_modules/highcharts/highcharts-more.js"></script>
  <script src="../node_modules/highcharts/modules/solid-gauge.js"></script>