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!
Based on the API you need to provide a function
to the visual
input. (API Reference)
In the code below I am binding the function visualFn
to the input visual
. (Working example)
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);
}