Search code examples
angularjshighchartshighcharts-ng

Highcharts plotting line instead of area

I am trying highcharts demo available in the documentation with highcharts-ng.

I want to plot area charts but when I run it, area doesn't appear but just the line.

Following is the code sample.

HTML:

<highchart id="chart1" config="chartConfig"></highchart>

Angular Controller

$scope.chartConfig = {
    chart: {
        type: 'area',
        spacingBottom: 30
    },
    title: {
        text: 'Fruit consumption *'
    },
    subtitle: {
        text: '* Jane\'s banana consumption is unknown',
        floating: true,
        align: 'right',
        verticalAlign: 'bottom',
        y: 15
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        verticalAlign: 'top',
        x: 150,
        y: 100,
        floating: true,
        borderWidth: 1,
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
    },
    xAxis: {
        categories: ['Apples', 'Pears', 'Oranges', 'Bananas', 'Grapes', 'Plums', 'Strawberries', 'Raspberries']
    },
    yAxis: {
        title: {
            text: 'Y-Axis'
        },
        labels: {
            formatter: function () {
                return this.value;
            }
        }
    },
    tooltip: {
        formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' +
                this.x + ': ' + this.y;
        }
    },
    plotOptions: {
        area: {
            fillOpacity: 0.5
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'John',
        data: [0, 1, 4, 4, 5, 2, 3, 7]
    }, {
        name: 'Jane',
        data: [1, 0, 3, null, 3, 1, 2, 1]
    }]
};

The visualisation available on the documentation page is:

enter image description here

Whereas I the chart rendered on my computer is:

enter image description here

Solution

  • The highcharts-ng config object isn't exactly like the highcharts object. See https://github.com/pablojim/highcharts-ng

    Why doesn't my plot options/tooltip/drilldown/other feature work? At least half of all issues filed are due to this. Before you file an issue read this! A common error is to put other Highcharts options directly into the chartConfig. In general if the Highcharts option you want isn't listed above you probably want to put it in chartConfig.options.

    So to change the chart type (which isn't one of the listed Highcharts options), you'll use the options member variable. 

       options: {
      //This is the Main Highcharts chart config. Any Highchart options are valid here.
      //will be overriden by values specified below.
      chart: {
        type: 'area',
        spacingBottom: 30
      }
    },

    http://jsfiddle.net/Cp73s/5198/