I have followed the chart demo instruction to insert pie chart into my project. but the label and legends are not showing properly. Label is not display on the chart, and legends always display on the top event i set
legend: { docked: 'bottom'},
My project has a little bit different with you demo, in my Viewport i have a tab panel like below:
{
xtype: 'allocationrosterlegendtab',
width: 400,
split: true,
region: 'east',
weight: 10
},
Ext.define('AS.sch.view.tab.LegendTab', {
extend : 'Ext.tab.Panel',
xtype : 'legendtab',
cls : 'legend-tab',
title : 'Legends',
requires : [
'AS.sch.view.panel.OperationChartPanel',
'AS.sch.view.panel.ExperimentmodeChartPanel',
'AS.sch.view.panel.RosterstaffChartPanel',
],
items : [
{
xtype : 'operationchartpanel',
},
{
xtype : 'experimentmodechartpanel',
},
{
xtype : 'rosterstaffchartpanel',
},
],
});
Ext.define('AS.sch.view.panel.ExperimentmodeChartPanel', {
extend : 'Ext.panel.Panel',
alias : 'widget.experimentmodechartpanel',
id : 'experimentmodechartpanel',
requires : [
'AS.sch.view.chart.ExperimentmodeChart',
],
layout: {
type: 'hbox',
align: 'stretch'
},
title: 'Experiment Modes',
items: [
{
xtype : 'experimentmodechart',
flex : 1
},
],
});
Ext.define('AS.sch.view.chart.ExperimentmodeChart', {
extend : 'Ext.chart.PolarChart',
xtype: 'experimentmodechart',
id : 'experimentmodechart',
width: 350,
border: false,
animate: true,
store: {
fields: ['name', 'g1'],
data: [
{"name": "Item-0", "g1": 57},
{"name": "Item-1", "g1": 45},
{"name": "Item-2", "g1": 67}
]
},
//configure the legend.
legend: {
docked: 'bottom'
},
//describe the actual pie series.
series: [{
type: 'pie',
xField: 'g1',
label: {
field: 'name',
display : 'inside',
contrast : true
},
donut: 30 // increase or decrease for increasing or decreasing donut area in middle.
}]
})
<canvas class="x-surface-canvas" id="ext-element-35" style="left: 0px; top: 0px; height: 498px; width: 350px;" height="515" width="362"></canvas>
I also attach the current pie chart on my scheduler, which has no label not matter it set as inside or outside as display attribute.
Any advice would be appreciated.