Minimum area on a graph

1 Answer 63 Views
Charts
Camilo
Top achievements
Rank 1
Iron
Camilo asked on 01 Jun 2023, 03:10 PM

Hello, I followed the instructions in that forum to make this graph, but now I would like to know what to do so that an element, whether at the beginning, middle or end, has a minimum space so that these things do not happen. (and also center the numbers since I decrease the height in half to make it look thinner.)

https://www.telerik.com/forums/100-stacked-bar-chart-with-rounded-ends 

 

 

 

Yanmario
Telerik team
commented on 06 Jun 2023, 07:42 AM

Hi Camilo,

Thank you for the provided details.

Would you mind sharing a runnable example of your current implementation of the custom visual and what is the desired end look of the Graph? That will help me better suggest a solution that can be useful in this specific case. Do keep in mind that custom visuals are a developer effort, but I will do my best to help you to achieve the desired look. Thank you in advance for your cooperation.

Regards,
Yanmario
Progress Telerik     

Camilo
Top achievements
Rank 1
Iron
commented on 06 Jun 2023, 03:53 PM

This is the link of the example of how I am implementing it, which is like the example of the other forum

https://stackblitz.com/edit/angular-ut9rfy?file=app%2Fapp.component.ts 

 

The only difference at the moment that I have with the one in the example is that I am modifying the sizes before starting to calculate the radius, whether it is the initial one, the middle one, or the final one.
here would be the piece of code of how I am implementing it

 

 e.rect.size.height = e.rect.size.height / 2;
    console.log(e.value + '%', e.rect.size.width);
    e.rect.size.width = e.rect.size.width < 10 ? 200 : e.rect.size.width;
Yanmario
Telerik team
commented on 09 Jun 2023, 10:09 AM

Hi Camilo,

What I could suggest for placing the percentages inside is to use the Chart labels as demonstrated in the following example:

https://stackblitz.com/edit/angular-p3hj7s?file=src%2Fapp%2Fapp.component.ts

It appears that there isn't a built-in option in the Kendo Angular Chart to move the generated percentages to the middle of the series. I was also not able to fully understand the whole context of the requirement, and further clarification might be needed for me to suggest a solution if one is available. Please bear in mind that our support scope does not encompass heavy requirements regarding custom visuals.

1 Answer, 1 is accepted

Sort by
0
Camilo
Top achievements
Rank 1
Iron
answered on 06 Jun 2023, 03:53 PM

In this case I am following this example

 

https://stackblitz.com/edit/angular-ut9rfy?file=app%2Fapp.component.ts

The only difference at the moment that I have with the one in the example is that I am modifying the sizes before starting to calculate the radius, whether it is the initial one, the middle one, or the final one.
here would be the piece of code of how I am implementing it

 e.rect.size.height = e.rect.size.height / 2;
 e.rect.size.width = e.rect.size.width < 10 ? 200 : e.rect.size.width;

 

 

 

Tags
Charts
Asked by
Camilo
Top achievements
Rank 1
Iron
Answers by
Camilo
Top achievements
Rank 1
Iron
Share this question
or