angularjs - Highcharts plotting line instead of area -


i trying highcharts demo available in documentation highcharts-ng.

i want plot area charts when run it, area doesn't appear line.

following 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 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 documentation page is:

enter image description here

whereas chart rendered on computer is:

enter image description here

the highcharts-ng config object isn't highcharts object. see https://github.com/pablojim/highcharts-ng

why doesn't plot options/tooltip/drilldown/other feature work? @ least half of issues filed due this. before file issue read this! common error put other highcharts options directly chartconfig. in general if highcharts option want isn't listed above want put in chartconfig.options.

so change chart type (which isn't 1 of listed highcharts options), you'll use options member variable.

   options: {       //this main highcharts chart config. highchart options valid here.       //will overriden values specified below.       chart: {         type: 'area',         spacingbottom: 30       }     }, 

http://jsfiddle.net/cp73s/5198/


Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -