Page 1 of 1

Sparkline chart using angular 6

Posted: Tue Jun 30, 2020 6:55 am
by mkbhj
in my scenario, I used a sparkline chart in angular 6. but it won't work.

Can you please make a one example demo of sparkline chart using angular 6.


please working on it this example and update it - https://jsfiddle.net/ufktLsva/3/


please give an example ASAP.

Re: Sparkline chart using angular 6

Posted: Wed Jul 01, 2020 7:32 am
by mateuszkornecki
Hello,

Welcome to our forum and thanks for contacting us with your question!

To achieve a similar effect in angular (using our official highcharts-angular wrapper) I will suggest you create a standalone component with data as it's input. Take a look at a simple demo I prepared for you, is it what you were looking for?

Docs references:
https://github.com/highcharts/highchart ... ng-started

Live demo:
https://stackblitz.com/edit/highcharts- ... -sparkline

Feel free to ask any further questions!

Best regards.

Re: Sparkline chart using angular 6

Posted: Wed Jul 01, 2020 8:46 am
by mkbhj
Thanks for your response!

here Instead of tooltip text series1, I need to change a January, February, March will change header format in a tooltip.


How can I achieve this?

Re: Sparkline chart using angular 6

Posted: Thu Jul 02, 2020 5:55 am
by mateuszkornecki
In order to achieve that you could change the xAxis type to 'category', add categories and then just use the tooltip.format or tooltip.formatter change the content of your tooltip.

API references:
https://api.highcharts.com/highcharts/xAxis.type
https://api.highcharts.com/highcharts/xAxis.categories
https://api.highcharts.com/highcharts/tooltip.formatter

Live demo:
https://jsfiddle.net/BlackLabel/jw9amue8/

Regards.

Re: Sparkline chart using angular 6

Posted: Fri Jul 03, 2020 5:02 am
by mkbhj
Thanks for responding!

reference - https://jsfiddle.net/gh/get/library/pur ... sparkline/

please refer above link example I need the same output in angular 6.

I tried but it won't work for me. based on your previous replies.

mainly tooltip not coming what shown in the reference link chart.

Re: Sparkline chart using angular 6

Posted: Fri Jul 03, 2020 8:00 am
by mateuszkornecki
I tested the example that I prepared in my previous reply and it was working correctly with angular 6. The tooltip doesn't contain all the information (for example the state name) because I didn't provide that. To make it work you can just add another @Input() to the spark-line component that will take a correct name and pass it into the chartOptions.series.name property.

if you encounter any problems while adding a series name input please let me know, I will be happy to help.

Regards.

Re: Sparkline chart using angular 6

Posted: Fri Jul 03, 2020 10:30 am
by mkbhj
Please provide Example of State Name added using @Input?

Re: Sparkline chart using angular 6

Posted: Mon Jul 06, 2020 7:15 am
by mateuszkornecki
I updated the demo, now it is possible to add a series name through angular - input property. Additionally, I formatter the tooltip so it will match the one from the JSfiddle.

Live demo:
https://stackblitz.com/edit/highcharts- ... -sparkline

Regards.

Re: Sparkline chart using angular 6

Posted: Fri Apr 09, 2021 11:44 am
by mkbhj
Hi,

Tooltip cannot be hide when releasing the pointer from the point

Re: Sparkline chart using angular 6

Posted: Fri Apr 09, 2021 12:01 pm
by mkbhj
Give me the solution

how to hide when pointer move from the point ?

Re: Sparkline chart using angular 6

Posted: Mon Apr 12, 2021 3:26 pm
by sebastian.h
Hi,
Thanks for your message again.

I don't know what is happening on your chart, could you create a simplified version of your problem?
This will help better understand your case.

You can use this demo like template:
https://stackblitz.com/edit/highcharts- ... mponent.ts

I'm waiting for news from you.
Best regards.

Re: Sparkline chart using angular 6

Posted: Mon Jun 28, 2021 6:17 am
by boyNamee
Please provide some documentation of how many types of charts are supported with highcharts, and what is the best way to integrate all these types with angular

Re: Sparkline chart using angular 6

Posted: Mon Jun 28, 2021 9:20 am
by sebastian.h
Hi boyNamee,
Welcome to our forum and thanks for contacting us with your question!

On our main page, you can find examples of chart types that we manage in the library.
https://www.highcharts.com/demo

The wrapper for implementing Highcharts inside is here.
https://github.com/highcharts/highchart ... ts-angular

Best regards.

Re: Sparkline chart using angular 6

Posted: Fri Dec 03, 2021 9:45 am
by mkbhj
Hello,

Still, I didn't hide that tooltip from the sparkline trend chart.

When I hover over the trend chart point the tooltip shows up then I can release the mouse from the pointer the tooltip does not hide.

Give me any solution for this.


Regards,

Manojkumar M.

Re: Sparkline chart using angular 6

Posted: Fri Dec 03, 2021 2:08 pm
by magdalena
Hi mkbhj,

Could you reproduce the issue in an online editor that I could work on?
sebastian.h wrote: Mon Apr 12, 2021 3:26 pm You can use this demo like template:
https://stackblitz.com/edit/highcharts- ... mponent.ts

Regards!