amcharts / amcharts5

The newest, fastest, and most advanced amCharts charting library for JavaScript and TypeScript apps.
Other
353 stars 95 forks source link

maskBullets on chart to "spill out" of the plot area #1639

Closed czogran closed 2 months ago

czogran commented 3 months ago

In amCharts 4, there is an option to mask bullets on the whole chart. image

amCharts 5 provides the feature to mask bullets on a series.
image

I have a chart in amCharts 4 with extra labels for each column.
image

I would like to achieve similar effects with amCharts 5. However, I am struggling because I do not see how to do it based on the tutorials below: https://www.amcharts.com/docs/v5/tutorials/handling-bullet-masking/ https://www.amcharts.com/docs/v5/tutorials/column-labels-as-categories/

Am I missing the proper configuration option, or is it not currently doable?

martynasma commented 3 months ago

The second link from your post does exactly that. What specifically are you struggling with?

czogran commented 3 months ago

The problem is that in amchart4 when I indexed labels I was able to achiave this effect:
image

If I understand correctly in amchart5 flow of wrapping labels is other. I was able to achieve similar effect by moving labels "down", not by wrapping:
https://codepen.io/czogran/pen/yLdgeKb

martynasma commented 3 months ago

I'm afraid I'm not entirely sure what you mean. What is "wrapping of labels"? I don't see any long labels that could benefit from wrapping.

Can you explain?

czogran commented 3 months ago

I was able to recreate problem in amchart5
please change line 89 https://codepen.io/czogran/pen/yLdgeKb

when for amchart4 it is working
line 36 https://codepen.io/team/amcharts/pen/NMgBob

martynasma commented 3 months ago

I still don't get it what is the "problem"? Neither of those CodePens look like the screenshot you provided.

czogran commented 3 months ago

I'm sorry for the inconvenience.
I am not used to CodePen and I did not click save after editing (since I am used to autosaving).

Here should be an example with which I am struggling (line 89):
https://codepen.io/czogran/pen/yLdgeKb

martynasma commented 3 months ago

Line 89 is min: 0?

I must be missing something, but what's the issue?

czogran commented 3 months ago

I hope that this time I properly saved code Pen example.

Amchart4:
https://codepen.io/czogran/pen/QWXpPZj

Amchart5: https://codepen.io/czogran/pen/yLdgeKb

In amchart4 I managed to have such screen.
image

In amchart5 you have to change min: 0 to for example -10.
Another question is that -Number.EPSILON and Number.epsilon work diffrently in Am4 and Am5. When I changed from -Number.EPSILON to Number.EPSILON in Am5 it seems to work.
image

martynasma commented 3 months ago

Once again, what is the problem? That the labels with 2021, 2022 are on top instead of bottom?

czogran commented 3 months ago

"L1" labels are the problem

martynasma commented 3 months ago

Why exactly are you using Number.EPSILON instead of just 0 (zero)?

czogran commented 3 months ago

I have inherited this piece of code.
There is subtle diffrence between Number.EPSILON and 0 in amchart4, depending on series creation order (when

image

I have modified Am4 example to present this behaviour. https://codepen.io/czogran/pen/QWXpPZj

martynasma commented 3 months ago

Negative Number.EPSILON is below zero. You have your Y-axis set min: 0 meaning anything below zero is hidden, including bullets.

I'm not sure what else to say. Either fix your data to not have negative values, or remove the min: 0 from axis configuration.

github-actions[bot] commented 2 months ago

This issue is stale because it has been open 30 days with no activity. It will be closed in 5 days unless a new comment is added.