CODEWITHSUNDEEP
javascriptjqueryjsphighcharts
Anil Kumar
Anil Kumar

Reputation: 2741

Highcharts :Uncaught TypeError: $(...).highcharts is not a function

Getting this error while running a HighCharts in my JSP Application.

Uncaught TypeError: $(...).highcharts is not a function(anonymous function) @ VendorReports:125n.Callbacks.j @ jquery-1.11.0.js:893n.Callbacks.k.fireWith @ jquery-1.11.0.js:928n.extend.ready @ jquery-1.11.0.js:982K @ jquery-1.11.0.js:989

Please suggest what to do

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

$(function () {
    $('#container').highcharts({
        colors: ["#7cb5ec", "#f7a35c"],
        chart: {
            type: 'column'
        },
        title: {
            text: 'Total fruit consumtion, grouped by gender'
        },
        xAxis: {
           categories: ['Apples' ]
        },
        yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Number of fruits'
            }
            //Nothing wrong with this code

Upvotes: 34

Views: 64434

Answers (5)

Zanoldor
Zanoldor

Reputation: 388

It happens with me too. In my case, I need click in a button to load the chart and if I click twice or more the chart stops to work. I was setting the color like this: 

Highcharts.setOptions({
        colors: Highcharts.map(Highcharts.getOptions().colors, function (color) {
            return {
                radialGradient: {
                    cx: 0.5,
                    cy: 0.3,
                    r: 0.7
                },
                stops: [
                    [0, color],
                    [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                ]
            };
        })
    });

$.getJSON("./myDataGraph.php", function(response){
        // Create the chart
        var chart = Highcharts.chart('myGraph', {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
... });

I couldn't solve the error, but I remove the "Highcharts.setOptions" and the chart works!!!

Upvotes: 1

odyth
odyth

Reputation: 4336

I was using an old version of the high charts version. From their website I assumed that the version listed under Specific version was their latest version and used that so it wouldn't auto update on me. However the version they had listed was super old so changing it to the actual latest version fixed the issue.

Upvotes: 2

ved prakash Saini
ved prakash Saini

Reputation: 554

I was having this issue, too. Ensure jQuery is imported before highchart.js. That fixed the issue for me.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

Upvotes: 53

baris1892
baris1892

Reputation: 1051

The approach taken from the official examples is working well. They defined the include script tag within the body tag therefore the solution given by Kabulan0lak is better I think.

<html>
<head>
    <title>Highcharts Example</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#container').highcharts({
                chart: {
                    type: 'spline'
                }
                // ... other options and data/series
            });
        });
    </script>
</head>

<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

Upvotes: 1

Kabulan0lak
Kabulan0lak

Reputation: 2136

What happens if you replace

$('#container').highcharts({
        colors: ["#7cb5ec", "#f7a35c"],
        chart: {
            type: 'column'
        },
        /* ... */

by 

var chart = new Highcharts.Chart({
                colors: ["#7cb5ec", "#f7a35c"],
                chart: {
                    type: 'column',
                    renderTo: 'container'
                },
                /* ... */

?

I had the same issue as you a while ago and I resolved it by using this type of initialization.

Upvotes: 38

Related Questions