mkbhj
Posts: 48
Joined: Tue Jun 30, 2020 6:47 am

Sparkline chart using angular 6

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.
mateuszkornecki
Posts: 1222
Joined: Mon Oct 28, 2019 10:29 am

Re: Sparkline chart using angular 6

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.
Mateusz Kornecki
Highcharts Developer
mkbhj
Posts: 48
Joined: Tue Jun 30, 2020 6:47 am

Re: Sparkline chart using angular 6

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?
mateuszkornecki
Posts: 1222
Joined: Mon Oct 28, 2019 10:29 am

Re: Sparkline chart using angular 6

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.
Mateusz Kornecki
Highcharts Developer
mkbhj
Posts: 48
Joined: Tue Jun 30, 2020 6:47 am

Re: Sparkline chart using angular 6

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.
mateuszkornecki
Posts: 1222
Joined: Mon Oct 28, 2019 10:29 am

Re: Sparkline chart using angular 6

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.
Mateusz Kornecki
Highcharts Developer
mkbhj
Posts: 48
Joined: Tue Jun 30, 2020 6:47 am

Re: Sparkline chart using angular 6

Please provide Example of State Name added using @Input?
mateuszkornecki
Posts: 1222
Joined: Mon Oct 28, 2019 10:29 am

Re: Sparkline chart using angular 6

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.
Mateusz Kornecki
Highcharts Developer
mkbhj
Posts: 48
Joined: Tue Jun 30, 2020 6:47 am

Re: Sparkline chart using angular 6

Hi,

Tooltip cannot be hide when releasing the pointer from the point
Attachments
Screenshot 2021-04-09 at 5.11.22 PM.png
Screenshot 2021-04-09 at 5.11.22 PM.png (54.94 KiB) Viewed 2452 times
mkbhj
Posts: 48
Joined: Tue Jun 30, 2020 6:47 am

Re: Sparkline chart using angular 6

Give me the solution

how to hide when pointer move from the point ?
Attachments
Screenshot 2021-04-09 at 5.30.11 PM.png
Screenshot 2021-04-09 at 5.30.11 PM.png (47.41 KiB) Viewed 2451 times
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Sparkline chart using angular 6

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.
Sebastian Hajdus
Highcharts Developer
boyNamee
Posts: 1
Joined: Mon Jun 28, 2021 6:14 am

Re: Sparkline chart using angular 6

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
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Sparkline chart using angular 6

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.
Sebastian Hajdus
Highcharts Developer
mkbhj
Posts: 48
Joined: Tue Jun 30, 2020 6:47 am

Re: Sparkline chart using angular 6

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.
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Sparkline chart using angular 6

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!
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Usage”