veloopity
Posts: 45
Joined: Fri Dec 07, 2018 3:06 pm

tooltip formatting question

I checked out the tooltip formatter but I didn't find the standard format which would look like this (image)
Image

I only need to add a span style=color (red and green for negative and positive values)

-Michael
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: tooltip formatting question

Hi veloopity,

Thanks for contacting us with your question.

Do you mean something like this?
https://jsfiddle.net/BlackLabel/xrkovgqd/

Let me know if it was what you were looking for.
Regards!
Mateusz Bernacik
Highcharts Developer
veloopity
Posts: 45
Joined: Fri Dec 07, 2018 3:06 pm

Re: tooltip formatting question

thx Mateusz. The values should be red/green, not the dot. I can add that myself to the tooltip formatting but I want to stick to the default tooltip format, just changing the value color. But all formatting examples on the web show something that looks very different to the default format. I don't know how to code the default format so I can take that and just add the color span.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: tooltip formatting question

Hi veloopity,

Please take look at this demo. It shows how to read a default format of a tooltip and then how to adjust value color.
https://jsfiddle.net/BlackLabel/zwome391/

Let me know if you have any further questions.
Regards!
Mateusz Bernacik
Highcharts Developer
pradeepkumarreddy
Posts: 16
Joined: Mon Jun 20, 2022 1:58 pm

Re: tooltip formatting question

Is it possible to edit only the x value in the default tooltip ?
In the screenshot, tooltip x: value shows as 5, can we show the category label(Jan) instead of index 5 ?
Or else can we remove the x value from the tooltip ?
How can we customise the default tooltip, instead of writing tooltip formatter ?
hicharts-tooltip.png
hicharts-tooltip.png (57.43 KiB) Viewed 956 times
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: tooltip formatting question

Hi pradeepkumarreddy,
Sadly, you cannot change only one line in the default tooltip. You can imitate this look and then change whatever you want - like in the demo below.

Demo: https://jsfiddle.net/BlackLabel/ksa4j7r2/

Let me know if you have any further questions.
Kind regards!
Hubert Kozik
Highcharts Developer
pradeepkumarreddy
Posts: 16
Joined: Mon Jun 20, 2022 1:58 pm

Re: tooltip formatting question

Hi Hubert,
Can you please share the code for android ? How can i achieve the same on android ?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: tooltip formatting question

pradeepkumarreddy,
Here is the same demo in Android:

Code: Select all

HIChartView chartView = findViewById(R.id.chartview1);
HIOptions options = new HIOptions();

HIXAxis xAxis = new HIXAxis();
String[] categoriesList = new String[] {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };
xAxis.setCategories(new ArrayList<>(Arrays.asList(categoriesList)));
options.setXAxis(new ArrayList<HIXAxis>(){{add(xAxis);}});


HISpline series1 = new HISpline();
series1.setName("Tokyo");
series1.setColor(HIColor.initWithName("green"));
series1.setData(new ArrayList<>(Arrays.asList(7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6)));

options.setSeries(new ArrayList<>(Arrays.asList(series1)));

HITooltip tooltip = new HITooltip();
tooltip.setEnabled(true);
tooltip.setFormatter(new HIFunction("function() { return `<span style=\"color:${this.color}\">●</span> ${this.series.name}<br> x: <b>${this.point.category}</b><br>y: <b>${this.y}`; }"));
options.setTooltip(tooltip);

chartView.setOptions(options);
Kind regards!
Hubert Kozik
Highcharts Developer
pradeepkumarreddy
Posts: 16
Joined: Mon Jun 20, 2022 1:58 pm

Re: tooltip formatting question

hubert.k wrote: Wed Jun 29, 2022 1:13 pm pradeepkumarreddy,
Here is the same demo in Android:

Code: Select all

HIChartView chartView = findViewById(R.id.chartview1);
HIOptions options = new HIOptions();

HIXAxis xAxis = new HIXAxis();
String[] categoriesList = new String[] {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };
xAxis.setCategories(new ArrayList<>(Arrays.asList(categoriesList)));
options.setXAxis(new ArrayList<HIXAxis>(){{add(xAxis);}});


HISpline series1 = new HISpline();
series1.setName("Tokyo");
series1.setColor(HIColor.initWithName("green"));
series1.setData(new ArrayList<>(Arrays.asList(7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6)));

options.setSeries(new ArrayList<>(Arrays.asList(series1)));

HITooltip tooltip = new HITooltip();
tooltip.setEnabled(true);
tooltip.setFormatter(new HIFunction("function() { return `<span style=\"color:${this.color}\">●</span> ${this.series.name}<br> x: <b>${this.point.category}</b><br>y: <b>${this.y}`; }"));
options.setTooltip(tooltip);

chartView.setOptions(options);
Kind regards!


Looks like the syntax is not correct in the below line. This is not working for android. please help.
`<span style=\"color:${this.color}\">●</span> ${this.series.name}<br> x: <b>${this.point.category}</b><br>y: <b>${this.y}`;
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: tooltip formatting question

Hi pradeepkumarreddy!
I have checked and everything works correctly, like in this demo: https://jsfiddle.net/BlackLabel/ksa4j7r2/ Could you tell me precisely what is not working? Maybe you have some errors or misspellings in your code?

I am looking for your response.
Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”