Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular HighCharts ParlimentChart is not working

Hello I am trying to use Parliment chart for highchart in angular. This link is about js but I want to use it in angular. In html

  <highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions" [(update)]="updateFromInput" [oneToOne]="oneToOne"></highcharts-chart>

in component

Highcharts: typeof Highcharts = Highcharts;
  updateFromInput = false;
  chartOptions = {
    chart: { type: 'item'},title: { text: ''},subtitle: { text: ''},
    legend: {labelFormat: '{name} <span style="opacity: 0.7">{y}</span>'},
    series: [{
        keys: ['name', 'y',  'label'],
        dataLabels: { enabled: true, format: '{point.label}'},
        center: ['50%', '88%'], size: '170%', startAngle: -100,endAngle: 100,
        data: [
            ['The Left', 69,  'DIE LINKE'],
            ['Social Democratic Party', 153, 'SPD']
        ],
    }]
  };

when i run it give error below

ERROR

Error: Highcharts error #17: www.highcharts.com/errors/17/?missingModuleFor=item

  • missingModuleFor: item

How can I run parliment chart in angular. This is demo which is not working

like image 869
mr. pc_coder Avatar asked Aug 21 '20 13:08

mr. pc_coder


Video Answer


1 Answers

I solved it with adding its chart js library. In this types charts in js file you can see that to run chart use

<script src="https://code.highcharts.com/modules/item-series.js"></script>

for angular part we need to import it from modules

import ItemSeries from 'highcharts/modules/item-series';

and then use ItemSeries(Highcharts); to accept it

like image 194
mr. pc_coder Avatar answered Sep 27 '22 21:09

mr. pc_coder