Dynamically set the axisCrossingValue

2 posts, 0 answers
  1. Matt
    Matt avatar
    6 posts
    Member since:
    Mar 2012

    Posted 13 Jun 2018 Link to this post

    We have charts that are databound and can have variable numbers of categories. A second axis can be added, but we would like it to also display on the far right of the chart. This means that setting the axisCrossingValue = [0, 10] (or something to that effect) might not work in every case. Is there a way to set the second axis to always be at the right without just setting the crossing value to some very large number?
  2. Tsvetina
    Tsvetina avatar
    2451 posts

    Posted 15 Jun 2018 Link to this post

    Hi Matt,

    If you want to set the axisCrossingValue dynamically, you would need to wait for the Chart to bind and then you can set the second crossing value to match this number of categories generated in the category axis:
    dataBound: function(e){
      var chart = this;
      var categoriesLen = chart.options.categoryAxis.categories.length;
      chart.options.categoryAxis.axisCrossingValue = [0, categoriesLen];

    I use this approach as compared to setting the configuration with setOptions method because the latter completely recreates the Chart, plus it should not be used in the dataBound event. The redraw method only repaints the Chart using its assigned options.

    Here is a Dojo where you can test the result:

    I hope this suggestion helps. Let me know if you have any additional questions.

    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top