CODEWITHSUNDEEP
javascripthighcharts
Dan Thory
Dan Thory

Reputation: 257

Using highcharts & highstock together on same page

Hope someone can help.. ? I'm trying to use both highcharts and highstock on a single page, loading from CDN, initially I set up various highcharts - gauge and bar chart with drilldown and using the following all is working fine:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

I now have a highstock chart but I can't get it to work together on the same page - I've tried just using highstock (without highcharts) and then adding highcharts-more and the modules, also tried using highcharts and then loading highstock as a module which didn't work either e.g

<script src="https://code.highcharts.com/modules/highstock.js"></script> OR

<script src="https://code.highcharts.com/modules/stock.js"></script>

I assume the order of the CDN links is crucial to make it work too?

I'm also aware that when rendering the charts highcharts uses Highcharts.chart and highstock uses Highcharts.stockChart - so how would this work when using both?

Many thanks.

Upvotes: 2

Views: 4516

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

By using Highstock, you can create both stockChart and standard chart with additional modules:

Highcharts.chart('container', {
    series: [{
        type: 'solidgauge',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }]
});

Highcharts.stockChart('container1', {
    series: [{
        type: 'line',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }]
});

Live demo: http://jsfiddle.net/BlackLabel/54ezsbgr/

If you really need to use Highstock and Highcharts separately, you can do it in this way:

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script>
    var Highstock = Highcharts;
    Highcharts = null;
</script>
<script src="https://code.highcharts.com/highcharts.js"></script>

Live demo: http://jsfiddle.net/BlackLabel/0vshoqpa/

Upvotes: 9

Related Questions