n8dogg2432
Posts: 11
Joined: Tue Jun 22, 2021 1:39 pm

Angular Column Comparison Chart Issues

I'm new to both angular, typescript, and highcharts, and am trying to just create the sample Column Comparison Chart in the highcharts demo in angular/typescript but I'm running into some issues converting it to typescript. A couple questions, does anyone know of a github repo they could share that uses the comparison chart or any examples on the internet because I can't find a single one? Other than that I think I've converted most of it to typescript but I'm running into a number of issues with the years.forEach function that I can't figure out and are laid out below.

Code: Select all

years = [2016, 2012, 2008, 2004, 2000];

years.forEach(function (year) {
    var btn = document.getElementById(year);

    btn.addEventListener('click', function () {

        document.querySelectorAll('.buttons button.active').forEach(function (active) {
            active.className = '';
        });
        btn.className = 'active';

        chartOptions.update({
            title: {
                text: 'Summer Olympics ' + year + ' - Top 5 countries by Gold medals'
            },
            subtitle: {
                text: 'Comparing to results from Summer Olympics ' + (year - 4) + ' - Source: <a href="https://en.wikipedia.org/wiki/' + (year) + '_Summer_Olympics_medal_table">Wikipedia</a>'
            },
            series: [{
                name: year - 4,
                data: dataPrev[year].slice()
            }, {
                name: year,
                data: getData(data[year]).slice()
            }]
        }, true, false, {
            duration: 800
        });
    });
});
1) line 3 - years.forEach(function(year) { - years gives the following error "Duplicate identifier 'years'.ts. Property 'years' has no initializer and is not definitely assigned in the constructor.ts(2564). Subsequent property declarations must have the same type. Property 'years' must be of type 'number[]', but here has type 'any'.ts(2717). starships.component.ts(244, 1): 'years' was also declared here. (property) StarshipsComponent.years: number[]"

2) line 3 - years.forEach(function(year) { - forEach gives the following error "'forEach', which lacks return-type annotation, implicitly has an 'any' return type.ts(7010). (method) StarshipsComponent.forEach(): any"

3) line 3 - years.forEach(function(year) { - function and (year) give off a few errors but I'm hoping figuring out the first two will help me solve this one.

There's also errors with the btn.addEventlistener, btn.className, and inside the chartOptions. I think once I fix the forEach some of these will get fixed or at least I'll be able to troubleshoot them. Hopefully I've provided enough info but please let me know if anything else is needed. Any help is GREATLY appreciated.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Angular Column Comparison Chart Issues

Hi n8dogg2432,
Thanks for contacting us with your question.

At the beginning I recommend know.
https://github.com/highcharts/highchart ... ts-angular
https://www.highcharts.com/docs/advance ... clarations

If you have more questions please create demo with your example on online code editor.
That will help better analyze your problem.

Best regards.
Sebastian Hajdus
Highcharts Developer
n8dogg2432
Posts: 11
Joined: Tue Jun 22, 2021 1:39 pm

Re: Angular Column Comparison Chart Issues

Hey Sebastian, thanks so much for the reply! I've checked out out those sights previously and am just flat out stuck at this point. I've been working with highcharts for the last couple weeks and have about 80 in so far and can pretty easily create the basic charts, just wanted to mention that so you know I've tried everything before coming here.

Below is the code in codesandbox with the error reproduced, hopefully I did that correctly. There's more errors than just in the "years.forEach" function but I'm hoping that when I can fix the errors in this function then I'll be able to figure out most of the other ones. The only other one I'm really confused on is on line 191, the error says "cannot find countries" and I just can't figure out why. I thought I might need to add this.countries because it's defined inside the class but even then I get an error.

I really appreciate any guidance and debugging you can help with. The code is below.

https://codesandbox.io/s/column-compari ... mponent.ts
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Angular Column Comparison Chart Issues

Hi,
Great to hear from you.

It will take more work to customize this demo, but I can guide you.
In general, I recommend starting from the basics, try to load data on the simplest column chart, gradually add new options and solve the problems you encounter.

When there is a problem with types you can extend the existing type by adding an interface like in this example.
https://stackblitz.com/edit/highcharts- ... n-type-yyy
https://github.com/highcharts/highchart ... e-examples

I'm waiting for news from you.
Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Usage”