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

Sparkline chart using angular 6

Tue Jun 30, 2020 6:55 am

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

Wed Jul 01, 2020 7:32 am

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: 25
Joined: Tue Jun 30, 2020 6:47 am

Re: Sparkline chart using angular 6

Wed Jul 01, 2020 8:46 am

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

Thu Jul 02, 2020 5:55 am

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: 25
Joined: Tue Jun 30, 2020 6:47 am

Re: Sparkline chart using angular 6

Fri Jul 03, 2020 5:02 am

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

Fri Jul 03, 2020 8:00 am

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: 25
Joined: Tue Jun 30, 2020 6:47 am

Re: Sparkline chart using angular 6

Fri Jul 03, 2020 10:30 am

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

Mon Jul 06, 2020 7:15 am

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: 25
Joined: Tue Jun 30, 2020 6:47 am

Re: Sparkline chart using angular 6

Fri Apr 09, 2021 11:44 am

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 1145 times

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

Re: Sparkline chart using angular 6

Fri Apr 09, 2021 12:01 pm

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 1144 times

User avatar
sebastian.h
Posts: 1699
Joined: Fri Aug 07, 2020 7:08 am

Re: Sparkline chart using angular 6

Mon Apr 12, 2021 3:26 pm

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

Mon Jun 28, 2021 6:17 am

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: 1699
Joined: Fri Aug 07, 2020 7:08 am

Re: Sparkline chart using angular 6

Mon Jun 28, 2021 9:20 am

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: 25
Joined: Tue Jun 30, 2020 6:47 am

Re: Sparkline chart using angular 6

Fri Dec 03, 2021 9:45 am

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: 313
Joined: Tue Aug 24, 2021 1:32 pm

Re: Sparkline chart using angular 6

Fri Dec 03, 2021 2:08 pm

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
Highcharts support engineer

Return to “Highcharts Usage”