kirbydesign / designsystem

Kirby Design System
https://cookbook.kirby.design
MIT License
85 stars 23 forks source link

[BUG] showMin/Max-Value overlapping axes #2591

Open kodeaben opened 2 years ago

kodeaben commented 2 years ago

Describe the bug

Whenever the `showMinValue` or `showMaxValue` is set and this value is close to one of the axes, it might overlap the axis. ## Describe how to reproduce the bug Edit the dataset in `_dataset` in `apps/cookbook/src/app/examples/charts-example/examples/stock-chart-example.component.ts:53` Example 1: minValue overlaps x-axis and y-axis: ``` typescript _dataset = [ { data: [ { x: 1637049659000, y: 12 }, { x: 0, y: 1110 }, ], borderColor: getThemeColorHexString('secondary'), }, ]; ``` ![Screenshot 2022-11-08 at 10 09 57](https://user-images.githubusercontent.com/114976818/200523152-fae0d2dc-4b45-452c-8a7f-89d3778387dd.png) Example 2: maxValue is hidden behind the edge of the chart: ``` typescript _dataset = [ { data: [ { x: 0, y: 20 }, { x: 2, y: 2 }, { x: 3, y: 6 }, ], borderColor: getThemeColorHexString('secondary'), }, ]; ``` ![Screenshot 2022-11-08 at 14 34 30](https://user-images.githubusercontent.com/114976818/200578406-93ebf5bc-f6c9-4913-8787-2243b80037eb.png) Navigate to http://localhost:4200/#/home/showcase/chart-stock. The Chart should now be shown with the issue ## Which Kirby version was used? ## What was the expected behavior?

Expected behaviour is that the labels does not overlap.

Add any screenshots

Please complete the following information:

Are there any additional context?

The label mustn´t overlap the graph line (see comment)


Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Verification

To make sure the bug is not intended behaviour; it should be verified by a member of team Kirby before moving on to implementation.

Implementation

The contributor who wants to implement this issue should:

Review

Once the issue has been implemented and is ready for review:

MartinCBBankdata commented 2 years ago

Yes, The only thing I would like to add is the solution does not put the label across the graph line. See the picture below. image

kodeaben commented 2 years ago

Possible solution. This is the same data as in Example 1 Screenshot 2022-11-09 at 11 00 22

This is the same data as in Example 2 Screenshot 2022-11-09 at 11 02 03

Same examples with a larger y-value Example1: Screenshot 2022-11-09 at 11 04 38

Example2: Screenshot 2022-11-09 at 11 09 00