Vertical alignment of Donut chart

[Ron]

Hello,

We have a donu chart we draw with the kendo ui vue chart and it looks good. We place it in a small html iframe as you can see in the attached screen shot.
The chart is using 100% of the (small) frame size. As you can see in the attached screen shot, it is not vertically aligned. Since the generated svg occupies 100% of the area I assume it is something in the seriesDefaults to tweak for it to be vertically centered. But I could not find how to do it. Please advise.


Thanks,

Ron.

[Alex Hajigeorgieva]

Hello, Ron,

The Kendo UI Charts have default values for their chartArea and plotArea width and height and also their margins and paddings.

You can tweak them to get the chart positioned where you need it to be.

If you need further assistance, can you provide us with the code which creates this chart?

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Ron]

Thanks Alex,

Both chartArea and plotArea are fixed values and we calculate them dynamically according to the screen size where the chart is presented. So this is a general question and not related to a specific chart implementation: We set the chartArea / plotAread and we see the chart is not in the middle of the screen - it appears as if it is aligned to the top of the rendered SVG. How can we align it so the chart will be vertically centered?


Thanks,

Ron

[Alex Hajigeorgieva]

Hi, Ron,

The chartArea is the property that should be used, perhaps, you should add a calculation for the margin.top

Alternatively, you could use just a common way of positioning an SVG in a div, non-related to Kendo UI with translateY for example:

https://dojo.telerik.com/@bubblemaster/Efurehib/2

 <style>
      .chart-container {
        transform: translateY(20%);
      }
    </style>

Regards,
Alex Hajigeorgieva
Progress Telerik

[Ron]

Alex,

Thanks. Several points:

 

1. The Dojo url is wrong, it should be: https://dojo.telerik.com/@bubblemaster/Efurehib

2.  chartArea margin top did not work, as it changed the chart size and made it smaller

3. Using translateY is problematic when the chart is contained in a small window and we do not want the user to have to scroll it. Basically, it adds more are to the element which originally stretched over the entire window height. Because we added that area the user now might have to scroll that chart to see all the data.

 

Thanks for your efforts. If you have some other ideas, we would love to hear them - unfortunately, so far we have to live with sub-optimal results.

 

Ron.

[Alex Hajigeorgieva]

Hello, Ron,

Apologies for the Dojo url.. we occasionally experience issues when it records new snippets.

There are a number of alternatives when it comes to common ways of positioning an SVG in a div. For example, you can use flex in combination with setting the chartArea.width:

https://dojo.telerik.com/ENAMAwUZ

  <style>
      .chart-container {
        height: 700px;
        display: flex;
        align-content: center;
      }
      
      #chart {
         margin: auto;
      }
      
    </style>
      <div class="chart-container">
        <div id="chart" ></div>
      </div>

Another way could be to specify the height of the container and use transformY:

https://dojo.telerik.com/UQaWiFUg

   <style>
     .chart-container {
        height: 700px;
        border: 1px solid 
      }
      
      #chart {
        top: 50%;
        transform: translateY(-50%);
      }
    </style>

I hope you find these approaches better suited for your project.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik