18 Answers, 1 is accepted
By default the Chart should fit the available space in the container. However, if the widget is initially hidden it would use its default dimensions. In that case I would suggest calling the redraw() method for the chart after it is displayed.
In case the behavior persists please send us a dojo sample where the behavior is observed so we can examine it locally.
Thanks for your response. How do I perform the redraw method in asp.net core?
This is my current code:
I am looking forward to your reply.
Thanks for your reply. I will paste it in my JS! Do I need to remove some of the CSS code I have above?
I have a dojo example here: https://dojo.telerik.com/UluCUqev
ONLY: I have no clue how to convert this:
to the format so it works in the fiddle.
I modified the dojo using the options of the Gauge that you have. Also, I defined the width and height of the gauge-container element so that the widget can resize correctly.
Give the sample a try and let me know how it works for you.
thanks for your reply, there are still some errors:
- When it is loading. The first 2 seconds it loads out of the box and after it jumps in box.
- By resizing the canvas the gauge gets a weird triangle form instead of a half circle.
Could those be because of the css? So yes, can you try to change it correctly? In the documentation there is that css provided..
The delay is added intentionally to show how the widget is resized. If you remove the setTimeout in the code the Gauge will be resized without delay.
About the ranges forming a triangle. The width of the range indicators can be configured via the rangeSize option. In order to make the range indicators narrower I would suggest decreasing the rangeSize value or removing the option altogether.
The updated dojo below reflects the described modifications:
I have changed my rangesize a bit. Also, when I set my box to example 500 x 500px and I hit reload. The gauge wont spread full in the box. It stays it same position. (yes i have out commented the setTimeout).
The widget is resized to take the available width and height of its container. In the latest example the #gauge-container element has width and height set to 200 pixels. This us why the RadialGauge is resized to that dimensions. If the #gauge-container div is configured to take all available space of its parent the resizing logic would work as expected.
Check out the updated dojo for reference:
When I copied the code from the latest dojo you've sent. It still wont work 100%...
In my own example I have a grid that creates 2 boxes of equal width and height. By resizing the boxes will get bigger/smaller. All the charts will be looped. Only still with the gauge the boxes get messed up and the other charts are pushed out of their boxes.
Now I have this as css (changed the width and height from the #gauge from the dojo):
How can I make it work so that every chart will display normal? (gauge is causing the problem).
I want this to work for Mobile...
Hopefully this is able to work
Could you please create a dojo example with the scenario that you have and the exact issue that you are facing? Calling the redraw method after the resizing, as my colleague suggested, should work correctly.
Looking forward to your reply with the dojo example.
Here is in full detail what problem I am facing and what I want:
I loop through a number. By looping I create boxes and in those boxes are the charts. Now do I have a grid with the css property of:
grid-template-columns: repeat(2, auto);
What I want:
1. To make the gauge appear normal and won't override the w&h of the box.
2. To display the others charts properly even on mobile S version.
I have mad a Dojo example where I've tried my best to show what's wrong
Hopefully you can give me some information to solve this.
When percentage value is used for width/height of the elements, all their wrapping containers should have either percentage value or explicit width/height. With that in mind, you could try setting the percentage width/height to the parent element of the Gauge as well:
Please have in mind that the Gauge could not change the width/height of the parent elements and it is responsible for its won elements only.
Long time ago, but I have made the gauges fit in the container!
Only now the other charts are going out of their boxes(bar, scatter). For the gauges I used flexbox with subtext so the gauge will fill up the remainig space (https://codepen.io/bjaeken/pen/WLMbMo). The picture is an example how it looks now. I tried to add chartarea height (this works). But the height is a fixed number, and I want it to be changing when the screen resizes. (Yes I am using for all my charts the resize and refresh functions)
As you can see. it is only going out of the box at the bottom. I also use the codepen css and the css mentioned in the earlier posts. I hope there is an solution that the charts will stay in their boxes in a small resolution.
Please create a dojo example with your current implementation, so we can inspect it and see if we can suggest anything from the perspective of the Chart widget to resolve the problem:
I have tried my best to clone my project. As you can see in the dojo the graph is getting its own height. (the border stops at a certain point.) When I use .Height(number) the graph will get that height. But it will be fixed then.
I can refer to the dojo I have posted earlier. As you see, the right chart is going out of its box (border bottom disappears and stops at 8%). Keep in mind. the gauge is working(even on resize). I desire to get the chart being full displayed. without having fixed heights. I tried to make a example of what I have now. But since the code will be used later I have to keep it as small as possible.
dojo2 In this dojo the height is 250px for now. By resizing the box will increase and descrease (I am doing this with JS and can't undo this). Only the chart will keep its own height.
This is the problem I am facing.
My desired result:
Let the chart stay in the given height and width even when there is subtext underneath it or not. By my gauges for example, the subtext stays at its positions and the gauge fils up the remaining space
Hopefully this is clear.
Hello, after some days I managed to get it! I removed the class k-chart every chart has. And added flex-grow: 2. Only, how can I remove the k-chart class and add the style? I can't simply target the id nor the name since they change all the time. Also, can I post above be removed?
Thanks in advance.
I have got the stuff above working.