This is a migrated thread and some comments may be shown as answers.
Ceiling on data
1 Answer 5 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
kristian asked on 30 Mar 2020, 07:40 AM

I have a chart, where i need to present data within a certain range.

I have used the max property, to set the top ceiling of the chart.

My issue is, that i want to visualize the points that exceeds the the max limit, as points on the very top of the chart, but with max they are just not rendered (or outside the chart).

I have been able to render them at the top of the chart, by mutating the data before feeding it to the chart, but my tooltips now obviously show the mutated value, instead of the original.

Because that tooltips only can accept simple data types, i am not able to provide them with a "display-value" and "real-value".

Im running out of ideas, do any of yo, with more experience with kendo, have an idea of how i can achieve this?


Here is some code, im happy to provide more detail if needed:

<kendo-chart class="septoriaChart" [transitions]="false" [categoryAxis]="categoryAxis" [valueAxis]="valueAxis" (render)="onRender($event)"
(legendItemClick)="$event.preventDefault()" (legendItemHover)="$event.preventDefault()">
<kendo-chart-tooltip *ngFor="let data of observed">
<ng-template kendoChartSeriesTooltipTemplate let-value="value" let-category="category" >
{{category | dateFormat}}
<br /> {{data.accumulatedWetHours}} {{'common.unitType.hours' | translate }}
<kendo-chart-legend position="bottom" orientation="horizontal" [item]="{ visual: legendItemVisual }"></kendo-chart-legend>
<kendo-chart-series-item type="line" color="#4E808D" name="{{'septoriaChart.observed' | translate}}" [markers]="seriesMarkers"
[data]="observedWithCeiling" field="accumulatedWetHours" categoryField="dateDay">
<kendo-chart-series-item type="line" color="#4E808D" name="{{'septoriaChart.forecast' | translate}}" [markers]="seriesMarkers"
[data]="forecast" field="accumulatedWetHours" categoryField="dateDay" dashType="dash">

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 01 Apr 2020, 06:39 AM

Hi Kristian,

Thank you for the provided details.

As far as I understand the set max property is on the value axis. If that is the case, if some of the series points exceed that max value then it is expected they are visualized off the chart. What could be done is to set the [pannable] option of the chart to true. It will allow the user to drag the chart plot-area and to see the outliers. Please check the following example demonstrating this behavior:

What else could be done is to set the [type] property of the value axis to be "log". That will allow the value axis to display its labels in a logarithmic way which allow to visualize the outliers:

It is also possible to modify the series data so that there are no values that exceed it:

In this example the max value is set to 9. The series data is mapped as follows:

export class AppComponent {
  public series: any[] = [{
    name: "India",
    data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855].map(i => i > 9 ? 9 : i)
  }, {
    name: "Russian Federation",
    data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
  }, {
    name: "Germany",
    data: [0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995]
    name: "World",
    data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
  public categories: number[] = [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011];

and that allows to demonstrate the outliers on top of the chart. However that approach modifies the actual data of the Chart.

Please check the suggestions and let me know in case I am missing something or if further assistance is required for this case. Thank you.

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
Top achievements
Rank 1
Answers by
Telerik team
Share this question