Hi,
I am trying to evaluate the possibilities to have horizontal lines for thresholds, maximums, minimums etc.
On the net I found a somewhat old post regarding stripLines, but this does not seem to be supported anymore. I can't find something in the docs / API.
So what I found next are plotbands, but manly these seem to be more suitable for areas, not really for lines.
This leaves me with custom plotbands using the drawing API (see: https://www.telerik.com/kendo-angular-ui/components/charts/elements/plot-bands/#toc-custom-plot-bands).
But this seems a bit overkill for a simple horizontal line which from my perspective only needs very basic things like value, title and let's say some styling like color, opacity, line thickness and the likes...
So my question: Is there a simple way for horizontal lines that I am missing or is the custom plotband the way to go in this matter?
Best Regards,
FirestormHell
1 Answer, 1 is accepted
Hi FirestormHell,
Your findings are correct and rendering custom plot bands might be the way to go here. What else I can suggest is if categorical charts are used, then in theory you can render a line chart that can act like a threshold, but it won't be exactly end to end of the Chart area depending on the configuration or show information.
Another approach that can also be considered is to use custom visuals of the series item to render such a line. The following examples demonstrate a line and arrow rendering:
https://stackblitz.com/edit/angular-gkydyq-lxy4kf?file=src%2Fapp%2Fapp.component.ts
https://stackblitz.com/edit/angular-gkydyq-bdp4ps?file=src%2Fapp%2Fapp.component.ts
I do understand that using custom visuals is a bit of an overkill, but in some scenarios, it might be needed. Our feedback portal is also open for feature requests if you have something specific in mind for our Charts.
Regards,
Yanmario
Progress Telerik
Rank 1
Iron
Hey again,
EDIT: Never mind, I made it work. Leaving my Question for reference and others to find. The solution was simple I had syntax errors in doing it right. This made it work:
[valueAxis]="[
{
name: 'valueAxis',
plotBands: [{
from: 24,
to: 24,
color: '#78d237',
opacity: 0.8,
}]},
{
name: 'valueNavigatorAxis',
pane: 'navigator',
visible: false,
}
]"and this was my initial QuestionThanks for the answers.
When trying the different solutions I stumbled upon a problem I encountered several time by now.
There are several ways to define Axis and I am not sure how to mix them.
I have a navigation selection pane like the following:
<kendo-chart #chart style="height: 600px"
[transitions]="transitions"
[categoryAxis]="[{
name: 'categoryAxis',
categories: categories,
crosshair: {
visible: true
},
rangeLabels: { format: 'dd MMM yyyy', visible: true },
min: min,
max: max,
majorGridLines: {
visible: false
},
minorGridLines: {
visible: false
},
majorTicks: { visible: false },
},
{
name: 'high',
labels: {visible: false},
line: {
color: 'red',
width: 2,
},
},
{
name: 'low',
labels: {visible: false},
line: {
color: 'red',
width: 2,
},
},
{
categories: categories,
name: 'navigatorAxis',
labels: { step: 2000 },
pane: 'navigator',
select: { from: min, to: max }
}]"
[valueAxis]="[
{name: 'valueAxis',},
{
name: 'valueNavigatorAxis',
pane: 'navigator',
visible: false,
}
]"
[panes]="[
{},
{ name: 'navigator', height: 100 }
]"
>
I am trying to get plotBands working for the value axis. All examples are in the more html tag element style notation similar to this:
<kendo-chart-value-axis>
<kendo-chart-value-axis-item name="valueAxis" [plotBands]="[{from: 2,to: 3,color: '#78d237',opacity: 0.8
}]">
</kendo-chart-value-axis-item>
</kendo-chart-value-axis>
I need the first one for the navigation panes. But I need things like plotBands. Does the first notation support plotbands? Am I just not getting how to do it?
For me it seems the first notation does not support all possibilities a chart value axis item in the second notation has, I cannot make it work together.
Is there a way to somehow reference or connect the axis defined in the first notation in an element tag style like the second notation?
Any other way to make plotbands work with the navigation?
I had several other problems where I could not get something from a kendo-chart-value-axis into the first notation (the navigation example).
Any help is appreciated.