Multi tool use

kendo-ui for Angular customizing LegendItemComponent

Good morning, everyone. I need to customize my legend-item in donut chart.
As I read in documentation I need to define the LegendItemVisualArgs object and initialize the createVisual() method.

Here I'm showing the way I've done it:

export class CustomLegendItemViewModel implements LegendItemVisualArgs {
options: any;
pointIndex: any;
sender: ChartComponent;
series: any;

createVisual(): Circle {
const geometry = new GeomCircle([10, 10], 10);

return new Circle(geometry);
}


After That I create this object in my Angular component:

export class ChartItemComponent implements OnInit, OnDestroy {
visual: CustomLegendItemViewModel = new CustomLegendItemViewModel();
}


And in HTML code I try to bind my custom legend-item view to my object:

<kendo-chart>
<kendo-chart-series>
<kendo-chart-series-item [holeSize]="100"
type="donut" [data]="data2" [size]="20"
categoryField="kind" field="share">
</kendo-chart-series-item>
</kendo-chart-series>
<kendo-chart-legend [visible]="true">
<kendo-chart-legend-item [visual]="visual"></kendo-chart-legend-item>
</kendo-chart-legend>
</kendo-chart>


And I've faced with error that

Uncaught TypeError: customVisual is not a function
at LegendItem.renderVisual (legend-item.js:112)
at LegendLayout.render (legend-layout.js:33)
at Legend.createItems (legend.js:101)
at new Legend (legend.js:27)
at Chart._getModel (chart.js:463)
at Chart._redraw (chart.js:279)
at Chart._noTransitionsRedraw (chart.js:1284)
at Chart._resize (chart.js:134)
at Chart.resize (chart.js:128)
at ChartComponent.push../node_modules/@progress/kendo-angular-charts/dist/es/chart.component.js.ChartComponent.resize (chart.component.js:389)


Does anyone have any ideas how can I solve it? Or just send some reference to customizing example.

Thanks!

function

visual

visual

function

(e: LegendItemVisualArgs) => Element

1 Answer
1

Based on the API you need to provide a function to the visual input. (API Reference)

function

visual

In the code below I am binding the function visualFn to the input visual. (Working example)

visualFn

visual

html

<kendo-chart>
...
<kendo-chart-legend [visible]="true">
<kendo-chart-legend-item [visual]="visualFn"></kendo-chart-legend-item>
</kendo-chart-legend>
</kendo-chart>


component

public visualFn(e: SeriesVisualArgs): Group {
const geometry = new GeomCircle([10, 10], 10);
return new Circle(geometry);
}


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.