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:
whereas chart rendered on computer is:
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 } },
Comments
Post a Comment