How to Get Highcharts Sparkline to Show Up On My Page.

Question

Below is the entire document I am using to try to generate a highcharts sparkline:

<script>
var sparkOptions = {
    title: {
        text: ''
    },
    credits: false,
    chart: {
        renderTo: 'container',
        width: 120,
        height: 20,
        type: 'area',
        margin: [2, 0, 2, 0],
        style: {
            overflow: 'visible'
        },
        skipClone: true
    },
    yAxis: {
        endOnTick: false,
        startOnTick: false,
        labels: {
            enabled: false
        },
        title: {
            text: null
        },
        tickPositions: [0]
    },
    xAxis: {
        labels: {
            enabled: false
        },
        title: {
            text: null
        },
        startOnTick: false,
        endOnTick: false,
        tickPositions: []
    },
    legend: {
        enabled: false
    },
    tooltip: {
        enabled: false
    }
};

$('#the_chart').highcharts(sparkOptions);
var t = $('#the_chart').highcharts();

t.addSeries({
    data: [1, 2, 3, 4, 5]
});
</script>

<div id="container" style="height: 40px; width: 200px;">
    <div id="the_chart"></div>
</div>

I've been searching for hours to try to get this to work. Can anyone point out what I am doing incorrectly? I have been using this link: http://jsfiddle.net/cainmodyo/VhxDA/ along with the highcharts website: http://www.highcharts.com/demo/sparkline/. Thanks in advance for any help you can give me!

you are setting `renderTo` property to `container` but then you call `.highcharts()` on `#the_chart` which would return nothing since it does not have the chart. Also to create a new chart from chartOptions you have to do `new Highcharts.Chart(chartOptions)`. `$('#containerId').highcharts()` is used to get the chart contained in the container. — Rahul Sharma, Jun 07 '16 at 15:46
@RahulSharma so I should change renderTo: to 'the_chart', and then what should I change the last part of the js to? I tried: `$('#the_chart').highcharts() = new Highcharts.Chart(sparkOptions); var t = $('#the_chart').highcharts();` but it did not work. — HaydenThrash, Jun 07 '16 at 16:53

Luca Regazzi · Accepted Answer · 2018-01-22T18:09:05.553

In Highcharts you have 2 ways of defining WHERE to put the chart:

Using the renderTo property of chart
calling the highcharts() function on the JQuery object of the container (ex: $('#container').highcharts({options})

In your code you are using both methods since you defined renderTo: 'container' in the sparkOptions and then called the highcharts method over another JQuery object $('#the_chart').highcharts(sparkOptions);

To make it work you should change your last lines:

$('#the_chart').highcharts(sparkOptions); var t = $('#the_chart').highcharts();

to:

var t = new Highcharts.Chart(sparkOptions);

and the remove the extra container you have in the html, the one with id the_chart.

Also you should wrap your code into '$(function () { << HERE YOUR SCRIPT >>});' to make sure it gets executed after Highcharts is loaded.

Fiddle

No, that was a typo. Thanks – Luca Regazzi Jan 22 '18 at 18:08 — Luca Regazzi, Jan 22 '18 at 18:08

How to Get Highcharts Sparkline to Show Up On My Page.

1 Answers1