highcharts, highstock without jQuery

Question

I understand you can use:

$(element).highcharts("StockChart", {}) to get a chart on that element.

However, I'd like to either be able to get gold of the highchart object so I can manipulate it afterwards, or I'd like to do:

new Highcharts.Chart({
    chart : {
      renderTo : 'container'
      type     : 'StockChart'
    }
    ...
  });

Firstly: The latter does not work for type 'StockChart'. I get error code 17 which says:

"The requested series type does not exist"

Secondly: I'd prefer to set the renderTo option to an element rather than an id. By using an id it forces my element to also use an id, but where I can have a container and a subelement in it, it becomes hard to reference that.

Now, if you have many graphs on a single html page, id's are not ideal. Rather I would like to use the actual dom element to pass.

By using $(element).highcharts("StockChart", {}) I was able to set almost all other options as global ones, including the rangeSelector and get things to work.

However, I still need to be able to access this, which is available in event functions, such as load, so I guess I could set a global one, but that might be a bit overkill.

Answer 1

I see three questions in your case:

1) To get object when creating chart, you have two ways:

• with jQuery:

  var chart = $(element).highcharts('StockChart', options).highcharts();
  

• without jQuery:

  var chart = new Highcharts.StockChart(options);
  

2) Error #17:

"The requested series type does not exist"

Is caused by type : 'StockChart'. type is reserved for a series type. As @Raeen Hashemi said, to create Highstock, use different constructor: new Highcharts.StockChart(options).

3) Yes, you can pass an object to renderTo: http://jsfiddle.net/yvxwa6oq/

new Highcharts.StockChart({
    chart: {
        renderTo: document.getElementsByClassName("container")[0] 
    },

    series: [{
        name: 'USD to EUR',
        data: [10, 20]
    }]
});

4) this - honestly, I'm not sure why you need access to this somewhere else than event handlers. Instead use Highcharts.charts[index] or stored variables like chart or $(element).highcharts()

Answer 2

for ES6, use it in below method.

import * as Highcharts from "highcharts";
import * as highchartsTree from 'highcharts/modules/treemap';

also, any highchart type can be added instead of treemap

highchartsTree(Highcharts);