This is a migrated thread and some comments may be shown as answers.
Can we change kendo chart intersection point
4 Answers 5 Views
This is a migrated thread and some comments may be shown as answers.
Sam
Top achievements
Rank 1
Sam asked on 22 Apr 2020, 06:49 AM

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

4 Answers, 1 is accepted

Sort by
0
Sam
Top achievements
Rank 1
answered on 23 Apr 2020, 08:43 AM
Any update on this please?
0
Svetlin
Telerik team
answered on 23 Apr 2020, 12:28 PM

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.
0
Sam
Top achievements
Rank 1
answered on 24 Apr 2020, 04:25 AM

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>

0
Svetlin
Telerik team
answered on 27 Apr 2020, 11:39 AM

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.
Asked by
Sam
Top achievements
Rank 1
Answers by
Sam
Top achievements
Rank 1
Svetlin
Telerik team
Share this question
or