Fixed size for pie chart legend and plotArea

Hi JX,

I am not quite sure what causes the issue in your application. Is it possible to provide a small runnable example which demonstrates your current implementation and which I can test locally? This way I would be able to check what exactly is going wrong and advice you further.

Regards,
Iliana Nikolova
Telerik

You can have a look at this below:  when you change the variable categoryLen to 5, the chart looks fine; however, when change categoryLen to 100, the legend label will mess up the chart.

<div id="example" class="k-content">
    <div class="chart-wrapper">
        <div id="chart" style="min-height:500px;min-width:500px"></div>
    </div>
    <script>
        function createChart() {
var series=[];
var categoryLen = 100;
   for(var i=0;i<categoryLen;i++)
{
series.push(
{
                    name: "The category name is a little long",
                    data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
                }
);
}

            $("#chart").kendoChart({
                title: {
                    text: "Gross domestic product growth /GDP annual %/"
                },
                legend: {
                    position: "top"
                },
                seriesDefaults: {
                    type: "column"
                },
                series: series,
                valueAxis: {
                    labels: {
                        format: "{0}%"
                    },
                    line: {
                        visible: false
                    },
                    axisCrossingValue: 0
                },
                categoryAxis: {
                    categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
                    line: {
                        visible: false
                    },
                    labels: {
                        padding: {top: 145}
                    }
                },
                tooltip: {
                    visible: true,
                    format: "{0}%",
                    template: "#= series.name #: #= value #"
                }
            });
        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>
</div>
 

I am very excited to see your response. Here I would like to propose another problem. (Our team is using KendoUI in our project.)
 
For the yAxes label format, I search the document, and found there are only some fixed format for showing valueAxes label, such as

labels: { format: "{0:n0}" }
But could we define a custom label format?  
In our situation, we need to show ‘1000’ as ‘1 K’, ‘1000000’ as ‘1 M’,  and so on…
 

Hi JX,

Thank you for the details. Up to the questions:

• Kendo UI Chart does not provide an option for fixing the plotArea height and there is no a suitable workaround I can suggest; 
• In order to achieve this you could use labels.template. For example: 
  $("#chart").kendoChart({

    //....

    valueAxis: {

      //....

      labels: {

         template: "#= formatLabels(value)#"

      }

    }

  });

    

  function formatLabels(value) {

    //your custom logix here

  }

Regards,
Iliana Nikolova
Telerik