This is a migrated thread and some comments may be shown as answers.

Vertical alignment of Donut chart

5 Answers 74 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Ron
Top achievements
Rank 1
Veteran
Ron asked on 24 Mar 2020, 08:49 PM

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.

5 Answers, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 26 Mar 2020, 12:46 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Ron
Top achievements
Rank 1
Veteran
answered on 26 Mar 2020, 07:30 PM

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

0
Alex Hajigeorgieva
Telerik team
answered on 30 Mar 2020, 03:26 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Ron
Top achievements
Rank 1
Veteran
answered on 30 Mar 2020, 04:59 PM

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.

0
Alex Hajigeorgieva
Telerik team
answered on 01 Apr 2020, 11:45 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Charts
Asked by
Ron
Top achievements
Rank 1
Veteran
Answers by
Alex Hajigeorgieva
Telerik team
Ron
Top achievements
Rank 1
Veteran
Share this question
or