Question about minorTicks on xAxis datetime & Waterfall chart onclick event

[vijayr98]

Hi there!

I have two questions

1) I am making a water fall chart with a date time x Axis and I am wanting to have minor ticks between days (representing days) and months (representing months). I have attached photos of it. The issue is when we do a monthly minorTick interval that is where minorTickInterval = 30.714 * 24 * 3600 * 1000 (representing the number of milliseconds in a month and where 30.714 is the average number of days in a month) the ticks are a bit misaligned. The issue is that the 30.714 is an average number of days in a month not the exact number of days in each month. Is there any other way we could align those ticks using some other property of highcharts?

2) We also want our waterfall chart bars to show a tooltip/popup on click as opposed to hover - is this possible in any way?

Thank you!

[jakub.s]

Hi!

Thanks for the question.

1. Yes, they are misaligned and they will be because the majorTickInterval is not a multiple of a minorTickInterval.

If you set the xAxis.minorTickInterval to 30 (days) * 24 (hours) * 60 (minutes) * 60 (seconds) * 1000 (miliseconds) then you will have a minorTickInterval equal to exactly one day and the major and minor tick will be aligned as each month consists of a whole number of days.

With that, everything should work fine. Take a look at this demo: https://jsfiddle.net/BlackLabel/f265ht7u/

2. In order to prepare a demo for you, I need to know a little more about what exactly are you trying to achieve. Do you want a few tooltips to be visible at the same time if you click multiple points? Do you want a tooltip to appear after a click and disappear after clicking on another point?

Best regards,
Jakub

[vijayr98]

Hi thank you for the reply!

1) This formula does not work for me and I am guessing it is because there are not exactly 30 days in each month so they are still misaligned. I have attached the screen shot which reflects the updated code. If it helps - I am using a waterfall chart and in this case I am getting data on a monthly basis and converting the date-stamp that I get into UTC milliseconds. I noticed in the example you sent you were going month by month and each minor tick was representing a day. In our case I want the minor tick to represent a month. Any other suggestion to achieve this?

2) Specifically what we want is to show only one tooltip for a bar at a time. So when we click on a bar the tool tip will show and when we click on another the previous tooltip will disappear and the new one would appear.

Thank you again

[jakub.s]

Hi,

1. Sorry, I misunderstood. There is no option like that in the API. A distance between minor ticks is constant in this type of xAxis.

I would advise you to disable minorTicks or set them to one day with a very delicate color and very small width.
Demo: https://jsfiddle.net/BlackLabel/gasbxurk/

2. When it comes to the tooltip, you can create a custom tooltip and perform some custom logic on it in the series.point.events.click event.
Take a look at this demo: https://jsfiddle.net/BlackLabel/8cj4d7fk/

API:
- https://api.highcharts.com/class-refere ... ts.Tooltip
- https://api.highcharts.com/highcharts/p ... int.events
- https://api.highcharts.com/highcharts/chart.events.load

Let me know if that helps.

Best regards,
Jakub

[kiki40509]

Hi,

I have a follow-up question on point #2, I was able to show a custom tooltip on click, and I now need to show a small table of data as the tooltip content. I tried using customTooltip.options.formatter and return custom HTML, but I'm not able to apply custom CSS to it. How would you recommend I build the table and style it in tooltip?


Thank you!

[jakub.s]

Hi,

You should be able to add both inline styles and external CSS styles after you set tooltip.formatter.useHTML to true.

Take a look at this demo: https://jsfiddle.net/BlackLabel/gzoyjLbe/

Let me know if that solved your problem.

Best regards,
Jakub

[kiki40509]

Hi,

I appreciate the responses.

I'm able to apply custom CSS now, but I'm having difficulties changing that blue border and opaque background of the tooltip, do you have any suggestions?


Thank you,

Alfred

[jakub.s]

Hi,

Sure, you can customize your tooltip with a few properties (you can read about them more in the API):
- tooltip.backgroundColor
- tooltip.borderColor
- tooltip.borderWidth

Here's the demo: https://jsfiddle.net/BlackLabel/ndq61vfo/

API:
- https://api.highcharts.com/highcharts/t ... roundColor
- https://api.highcharts.com/highcharts/t ... orderColor
- https://api.highcharts.com/highcharts/t ... orderWidth

Let me know if that solves your problem.

Regards,
Jakub

[kiki40509]

Thanks a lot for the response.

I have another follow up question.

I'm trying to use *ngFor inside the block of HTML in the formatter method, but *ngFor doesn't work in there, do you know how I can go about this?

Example:

customTooltip.options.formatter = () => {
let table = `
<table class="table">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr *ngFor="let item of items">
<td>{{ items }}</td>
<td>data</td>
<td>data</td>
</tr>

</table>
`
return table;
}


Thank you,

Alfred

[jakub.s]

Hi,

Could you please send me a short demo in jsfiddle or codepen showing how you use Angular and how you render this chart?

Regards,
Jakub

[kiki40509]

Hi,

I have figured out the precious question I posted, thank you.

I have another question regarding the same tooltip. Now the tooltip only hides when we click on a bar, but we want the tooltip to hide also when we click anywhere else besides the bars, do you have any suggestions?


Thanks,

Alfred

[jakub.s]

Hi,

No problem:)

You can hide the tooltip on chart.events.click which fires when after a click on the plot's background.

Demo: https://jsfiddle.net/BlackLabel/Ltgs7p5y/
API: https://api.highcharts.com/highcharts/c ... ents.click

Regards,
Jakub

[kiki40509]

Hi,

I got a follow up question. Do you know if it's possible for the tooltip or part of the tooltip to be outside of the chart? because when I try to do that, the part of the tooltip outside of the chart gets cut off.



Thank you,

Alfred

[kiki40509]

Hi,

The previous problem was solved. I was able to show the tooltip outside the chart by setting tooltip: { outside: true }.


Thanks,

Alfred

[jakub.s]

I'm glad you figured it out!

Do not hesitate to let me know if you have any more questions.

Regards,
Jakub