Can we change kendo chart intersection point

5 posts, 0 answers
  1. Sam
    Sam avatar
    11 posts
    Member since:
    Apr 2020

    Posted 22 Apr Link to this post

    Hi 

    I am using kendo scatter chart with 4 quardant . is there any way by which we can  change the intersection from (0,0) to user provided value

     

    Thanks,

    Sam

  2. Sam
    Sam avatar
    11 posts
    Member since:
    Apr 2020

    Posted 23 Apr Link to this post

    Any update on this please?
  3. Svetlin
    Admin
    Svetlin avatar
    388 posts

    Posted 23 Apr Link to this post

    Hi Sam,

    The [axisCrossingValue] can be used to provide a point where the Y axis should cross the X axis. Please check the following example demonstrating this option:

    https://stackblitz.com/edit/angular-qhse1m?file=app/app.component.ts

          <kendo-chart-x-axis>
              <kendo-chart-x-axis-item [title]="{ text: 'Wind Speed [km/h]', position: 'top' }" [axisCrossingValue]="[4]">
              </kendo-chart-x-axis-item>
          </kendo-chart-x-axis>

    The example could be further updated to pass a variable or a component property to the axisCrossingValue input so that the crossing point changes dynamically.

    I hope this helps. Please let us know in case any further assistance is required for this case. Thank you.

    Regards,
    Svetlin
    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.
  4. Sam
    Sam avatar
    11 posts
    Member since:
    Apr 2020

    Posted 23 Apr in reply to Svetlin Link to this post

    Thanks a lot Svetlin !!  can i use [axisCrossingValue] in both axis as mentioned below?? 

    <kendo-chart-x-axis>
    <kendo-chart-x-axis-item [axisCrossingValue]="[500]" [labels]="valueAxisLabels" [min]="graph.xModel.min" [max]="graph.xModel.max">
    </kendo-chart-x-axis-item>
    </kendo-chart-x-axis>
    <kendo-chart-y-axis>
    <kendo-chart-y-axis-item [axisCrossingValue]="[500]" [labels]="valueAxisLabels" [min]="graph.yModel.min" [max]="graph.yModel.max">
    </kendo-chart-y-axis-item>
    </kendo-chart-y-axis>

  5. Svetlin
    Admin
    Svetlin avatar
    388 posts

    Posted 27 Apr Link to this post

    Hi Sam,

    Sure, that is possible. The YAxis provides an [axisCrossingValue] input property as well. Please check the following updated example demonstrating its usage:

    https://stackblitz.com/edit/angular-qhse1m?file=app/app.component.ts

        <kendo-chart [title]="{ text: 'Rainfall - Wind Speed' }">
          <kendo-chart-series>
            <kendo-chart-series-item type="scatter"
                                     [data]="weatherData"
                                     xField="rainfall" yField="windSpeed">
            </kendo-chart-series-item>
          </kendo-chart-series>
          <kendo-chart-x-axis>
              <kendo-chart-x-axis-item [title]="{ text: 'Wind Speed [km/h]', position: 'top' }" [axisCrossingValue]="[4]">
              </kendo-chart-x-axis-item>
          </kendo-chart-x-axis>
          <kendo-chart-y-axis>
              <kendo-chart-y-axis-item [axisCrossingValue]="[30]" [title]="{ text: 'Rainfall [mm]', position: 'top'  }">
              </kendo-chart-y-axis-item>
          </kendo-chart-y-axis>
        </kendo-chart>

    I hope this helps.

    Regards,
    Svetlin
    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.
Back to Top