Can we change kendo chart intersection point

[Sam]

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

[Sam]

Any update on this please?

[Svet]

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

[Sam]

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>

[Svet]

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