CODEWITHSUNDEEP
javascripthighcharts
Paman Gembul
Paman Gembul

Reputation: 173

How to create area range with line highchart

I want to create chart with Highchart.
actually I use area range and line.
but it doesn't work since my code below 

<script type="text/javascript">
var chart1;
    $(document).ready(function() {
        chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'chartPlace',
        },
        title: {
            text: ''
        },
        xAxis: {
           type: 'linear'
        },
        yAxis: {
           title: {
               text: null
           }
            },
        series: [{
           name: 'KL - SCOC',
           marker: {
            fillColor: 'white',
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[0]
           },
           zIndex: 1,
           data: [['Jan',19],['Feb',21],['Mar',18],['Apr',12],['May',26],['Jun',20],['Jul',6]]
        }, {
           name: 'Range',
           data: [['Jan',77,3],['Feb',98,2],['Mar',83,4],['Apr',75,3],['May',76,2],['Jun',77,3],['Jul',9,3]],
           type: 'arearange',
           lineWidth: 0,
           linkedTo: ':previous',
           color: Highcharts.getOptions().colors[0],
           fillOpacity: 0.3,
           zIndex: 0
        }]
       });
     });
</script>

The error output is

Uncaught TypeError: undefined is not a function

so how to solve this matter. Thanks in advance.

Upvotes: 0

Views: 2599

Answers (1)

zs2020
zs2020

Reputation: 54514

It has to be something else in your code. I created a demo and it works fine. It will be rendered in this div:

<div id="chartPlace"></div>

And please make sure you have highcharts-more.js referenced in your html.

Demo in jsFiddle

Upvotes: 1

Related Questions