Search code examples
jquerycsssvgkendo-uikendo-dataviz

How to get a kendo ui barchart column width?


There are any way to get the kendo ui dataviz bar chart column size? I know it's not possible to set it and we need to struggle with that insipid gap/spacing properties but I want to extend that chart and need to know the width of the column.

I'm trying to find out it by jQuery/css but cannot find a class or id to use in a selector to get the svg box size.

I'm also seeking to find out some property/method of the chart like

 $chart.data('kendoChart')._options.plotArea.seriesDefault.columns.width

but still not luck.


Solution

  • I found a way:

           var chart = chart.data('kendoChart');
    
           var plotArea = chart.element.find('g:first');
    
           // The mileage can differ here but the idea is to find the group of columns inside the plotArea
           var columns = plotArea.find.children('g');
    
           for (var i = 0; i < columns.length; i++) {
    
              var col = columns.eq(i);
              // get the "box" from that column
              var box = col.children(":first").get(0).getBBox();
              var width = box.width;
    
           }
    

    Remarks: getBBox() returns height, width, x and y where width and x seems ok but I got problems getting the correct height and y values. I get around it getting that columns labels y (label.position='outsideEnd').

    For stacked bars it starts rendering from the last serie since it starts drawing top down but the first serie is at the bottom of the stack. The order of the columns ill be like:

    serie C    |1| |4| |7| |10|
    serie B    |2| |5| |8| |11|
    serie A    |3| |6| |9| |12|
    

    and so on.