Axis Width

[Peter]

Hello,

to resample a large dataset on server side I need to know the width of the categoryaxis of a line chart.
As workaround I use now the width of the div: $("#chart").width().

How can I get the width of $("#chart").data("kendoChart").options.categoryAxis ?

Best regards,

Peter

[Tsvetina]

Hello Peter,

You could calculate this if you access the min and max category slot and subtract the leftmost point x value of the min slot from the rightmost x point value of the max slot. You can do this in the dataBound event of the Chart or in any other event after the Chart is initialized.

dataBound: function(e) {
  var categoryAxis = e.sender.getAxis("categoryAxis");
  var lastCategoryIndex = Math.max(1, categoryAxis.range().max);
  var minCategorySlot = categoryAxis.slot(0);
  var maxCategorySlot = categoryAxis.slot(lastCategoryIndex);

  var categoryAxisWidth = maxCategorySlot.bottomRight().x - (minCategorySlot.origin.x - 10);
  alert("width: " + categoryAxisWidth);
}

The 10px adjustment in the calculation is made to get the exact width, as you can see that at the bottom left end of the Chart, the category and value axis have a tiny overlap.

Additionally, make sure you assign a name to the category axis because it is needed as an argument when accessing it using the getAxis method.

Here is a small example using this code:
https://dojo.telerik.com/aNEgoCIz

Regards,
Tsvetina
Progress Telerik

[Peter]

Thank you, Tsvetina!

It work perfect. In the mean time I implemented a simple solution, which get approx. result:

var b = e.sender._plotArea.axisX.box;
var _plotAreaAxisXWidth = b.x2 - b.x1;
var divchartwidth =$("#chart").width();

 

https://dojo.telerik.com/ohiGUWoP

Best Regards,
Peter

 

[Randy]

I try to avoid using internal properties (the properties whose names start with an underscore) so here is how to get the width of the chart, specifically the width of the x-axis plot area of the chart:

const xAxisDimensions = e.sender.plotArea().visual.chartElement.axisX.box;
const xAxisWidth = xAxisDimensions.x2 - xAxisDimensions.x1;
console.log('xAxisWidth', xAxisWidth);

or an alternative method via the DOM element:

const xAxisDimensions = $('#chart').getKendoChart().plotArea().visual.chartElement.axisX.box;
const xAxisWidth = xAxisDimensions.x2 - xAxisDimensions.x1;
console.log('xAxisWidth', xAxisWidth);