I have the following data: Price Downloads 59 10 62 15 69 30 70 10 75 25 78 30 I want to present the data in a chart in such a way that the Price are grouped together and the Downloads have their medians. So it would be: < 59: 10 61-70: (Median of 62, 69 and 70 above) 71-80: (Median of 75 and 78 above) X-axis would be the Price then Downloads on Y-axis. I can create the median but I just want to be able to group the X-axis.
Currently, the Radar Chart cannot be zoomed in/out. Please, provide a zoomable property that would allow the developer to achieve this functionality.
Currently missing values can be either interpolated (with the same dash type), zero or gap. It would be nice to provide the opportunity to configure the dash type for the missing (interpolated) values and have for example a solid line for the existing values, and dashes for the interpolated portion.
Hello ,
Kindly Have issue with stacked bar when try to draw two items in chart with specified with as the below
<kendo-chart-series>
<kendo-chart-series-item type="bar" [stack]="{ type: '100%' }" [data]="[97]">
</kendo-chart-series-item>
<kendo-chart-series-item type="bar" [stack]="{ type: '100%' }" [data]="[7]">
</kendo-chart-series-item>
</kendo-chart-series>
Can Anyone help on that ?
Hi Kendo Theme,
The current behavior will re-render the Chart and the tooltip or crosshair disappear and the user will need again to hover over the series. This behavior can be observed in the following example:
https://stackblitz.com/edit/angular-dmpexe-sf8zoj?file=src%2Fapp%2Fapp.component.ts
The desired behavior would be to keep the popup open or the crosshair present when updating the data.
Thank you for your consideration.
Severity: Sev2 (High)
Test Environment: OS: Windows 11 22H2
OS Build: 23620.1000
Pre-Requisite: Set browser zoom level to 400% and display resolution: 1280x1024 (or) In dev Tools set the resolution to 320*256.
Repro steps:
1.Open URL: http://www.telerik.com/kendo-ui in edge browser.
2.Navigate to 'Kendo UI for Angular ' tab item and invoke it.
3.Navigate to the Angular chart control and invoke it.
4.In left navigation pane click Scatter control under 'series types'.
5.Navigate to 'Scatter Plot Chart'.
6.Verify whether X-axis is getting overlapped while resizing the page upto 400% of zoom or not.
Actual Result:
X-axis is getting overlapped while resizing the page upto 400% of zoom.
Expected Result:
X-axis should not get overlapped when browser zoom level set to 400%.
Hi team,
Please provide an animate property part of the Tooltip interface and all tooltip-related components:
https://www.telerik.com/kendo-angular-ui/components/charts/api/TooltipComponent/
https://www.telerik.com/kendo-angular-ui/components/charts/api/ValueAxisCrosshairTooltipComponent/
https://www.telerik.com/kendo-angular-ui/components/charts/api/SeriesTooltipComponent/
..etc
Currently, the tooltip animations can be disabled through the tooltipInstance.tooltip property of the Chart reference:
@ViewChild('chart') public chart: ChartComponent;
ngAfterViewInit() {
this.chart.tooltipInstance.animate = false;
}
add native support for displaying the series stack label. as for today doing so is a work around using the labels property of seriesDefaults.
We have noticed that the labels on the y-axis are rendered too close together, almost touching each other. This can be configured by setting the step option.
However, it could be ideal in such cases for the step to be determined automatically by the Chart based on the available space (similar to the rotation option which rotates the label, but in this case to control the step).
Please provide an option to automatically render the labels based on the available space.
Hi,
I'd it would be great if Kendo offered a way to build 2D density plot, even myabe somthing similar to a seaborn https://python-graph-gallery.com/82-marginal-plot-with-seaborn/
When the chart is configured to use the selection zoom. One must press the Shift-Key and select an area inside the chart to zoom.
I the chart shows tooltips, in most cases the tooltip pops up under the cursor and it is not possible to select an area.
The tooltip shoud be disabled, when the shift-key (or the configured key) is pressed inside the chart area.
Enabling Shift-key zooming in the stockChart produces an exception when the user Zooms.
I was told by T. Tsonev that this feature is not supported in the stockChart.
Here is a example:
https://stackblitz.com/edit/angular-gmoekv-rwu28c?file=app/app.component.ts
Please see the attached screenshot.
On the leftmost side, the donut chart on the top has dark blue color (Oil). And i am using the same color for the bubble chart below. But the color on the bubble is not showing dark blue but lighter one. Interestingly if i mouse over on the bubble. the color turns dark blue. how can we make it show the right color(dark blue)? and only show lighter blue when mouse over?
this is my template in case you need it.
<kendo-chart (seriesClick)="onSeriesClick($event) " style="height:800px">
<kendo-chart-series>
<kendo-chart-title text="Efficent Hedging: M-risk by Commodity ({{position}} Portfolio)" [font]="font"></kendo-chart-title>
<kendo-chart-series-item [labels]="{ visible: true, content: 'test', color: 'white', background:'none'}" [color]="barColor" type="bubble" [data]="data" xField="x" yField="y" sizeField="y" categoryField="category">
<kendo-chart-series-item-tooltip>
<ng-template let-value="value" let-category="category" let-dataItem="dataItem" style="white-space: pre-line">
<div style="white-space: pre-line">{{tooltip(dataItem )}} </div>
</ng-template>
</kendo-chart-series-item-tooltip>
</kendo-chart-series-item>
<kendo-chart-x-axis title="xx">
<kendo-chart-x-axis-item [title]="{ text: 'Liquidity Premium (cost in cents to hedge 1$ of M-risk) ', font: font }" [labels]="{ format: '{0:N0}' }">
<kendo-chart-x-axis-item-labels format="{0:N0}" [skip]="1" rotation="auto">
</kendo-chart-x-axis-item-labels>
</kendo-chart-x-axis-item>
</kendo-chart-x-axis>
<kendo-chart-y-axis title="yy">
<kendo-chart-y-axis-item [title]="{ text: 'M-risk ($MM) ', font:font }" [labels]="{ format: '{0:N0}' }">
</kendo-chart-y-axis-item>
</kendo-chart-y-axis>
<kendo-chart-legend [visible]="true">
</kendo-chart-legend>
</kendo-chart-series>
</kendo-chart>
Describe the bug
The <kendo-chart-series-item> component is missing settings for median and mean elements rendered by Box Plot series.
These are the two lines within each box (dashed line is mean):
Expected behavior
These series elements should be customizable and should accept an object containing color, width, dashType and opacity.
Request to allow control of SVG dimensions from exportSVG options
Ideal behavior:
export class AppComponent {
this should produce a 600x300 svg. ChartComponent.prototype.exportSVG does not pass options into ChartComponent.prototype.exportVisual in the kendo-angular-charts library. I request that it pass these options in to allow for SVG dimension specification. I have modified the code manually and it behaves as expected.
Hi,
This documentation Stackblitz demo is broken (see screenshot below for details).
