im using a pie chart on my dashboard, but im trying to load him correctly but he keeps small on the graphs:
enter image description here;
only when i do a zoom-in or a zoom-out on browser, it normalizes, but i need to keep him correctly
enter image description here
here is my code:
var res = xhr.responseJSON;
<code> res.forEach(note => note.config = {
fill: note.name <= 4 ? '#f9665b' : note.name <= 6 ? '#fbef82' : '#60e26f',
});
if (chart_nps) {
chart_nps.$label.set('text', res[0] && res[0].NPS || '-%');
chart_nps.data.setAll([{
name: 'root',
children: [{
name: 'Unsatisfied',
children:
res.filter(obj => obj.name <= 4),
config: {
fill: '#f9665b',
}
},
{
name: 'Neutral',
children:
res.filter(obj => [5, 6].includes(obj.name)),
config: {
fill: '#fbef82',
}
},
{
name: 'Satisfied',
children:
res.filter(obj => obj.name >= 7),
config: {
fill: '#60e26f',
}
}]
}]);
chart_nps.selectDataItem(chart_nps.dataItems[0]);
chart_nps.appear(1000, 100);
return;
}
var root = am5.Root.new('nps_recept');
root.setThemes([
am5themes_Animated.new(root)
]);
var container = root.container.children.push(am5.Container.new(root, {
width: am5.percent(100),
height: am5.percent(100),
layout: root.verticalLayout
}));
var series = container.children.push(am5hierarchy.Sunburst.new(root, {
singleBranchOnly: true,
downDepth: 10,
initialDepth: 10,
topDepth: 1,
innerRadius: am5.percent(20),
valueField: 'value',
categoryField: 'name',
childDataField: 'children',
calculateAggregates: true,
tooltip: am5.Tooltip.new(root, {
stroke: '#333333',
})
}));
chart_nps = series;
series.slices.template.setAll({
templateField: 'config',
calculateAggregates: true
});
series.labels.template.setAll({
text: '[#333333 bold]{category}[/]n[#333]{sum} / {valuePercentTotal.formatNumber('0.0')}%[/]',
});
series.$label = container.children.push(am5.Label.new(root, {
text: res[0] && res[0].NPS || '-%',
fontSize: 22,
fontWeight: '500',
fill: am5.color(0xffffff),
stroke: am5.color(0xffffff),
textAlign: 'center',
y: am5.percent(50),
x: am5.percent(50),
centerX: am5.percent(50),
centerY: am5.percent(100),
paddingTop: 0,
paddingBottom: 0
}));
series.data.setAll([{
name: 'root',
children: [{
name: 'Unsatisfied',
children:
res.filter(obj => obj.name <= 4),
config: {
fill: '#f9665b',
}
},
{
name: 'Neutral',
children:
res.filter(obj => [5, 6].includes(obj.name)),
config: {
fill: '#fbef82',
}
},
{
name: 'Satisfied',
children:
res.filter(obj => obj.name >= 7),
config: {
fill: '#60e26f',
}
}]
}]);
series.selectDataItem(series.dataItems[0]);
series.appear(1000, 100);
</code>
<code> res.forEach(note => note.config = {
fill: note.name <= 4 ? '#f9665b' : note.name <= 6 ? '#fbef82' : '#60e26f',
});
if (chart_nps) {
chart_nps.$label.set('text', res[0] && res[0].NPS || '-%');
chart_nps.data.setAll([{
name: 'root',
children: [{
name: 'Unsatisfied',
children:
res.filter(obj => obj.name <= 4),
config: {
fill: '#f9665b',
}
},
{
name: 'Neutral',
children:
res.filter(obj => [5, 6].includes(obj.name)),
config: {
fill: '#fbef82',
}
},
{
name: 'Satisfied',
children:
res.filter(obj => obj.name >= 7),
config: {
fill: '#60e26f',
}
}]
}]);
chart_nps.selectDataItem(chart_nps.dataItems[0]);
chart_nps.appear(1000, 100);
return;
}
var root = am5.Root.new('nps_recept');
root.setThemes([
am5themes_Animated.new(root)
]);
var container = root.container.children.push(am5.Container.new(root, {
width: am5.percent(100),
height: am5.percent(100),
layout: root.verticalLayout
}));
var series = container.children.push(am5hierarchy.Sunburst.new(root, {
singleBranchOnly: true,
downDepth: 10,
initialDepth: 10,
topDepth: 1,
innerRadius: am5.percent(20),
valueField: 'value',
categoryField: 'name',
childDataField: 'children',
calculateAggregates: true,
tooltip: am5.Tooltip.new(root, {
stroke: '#333333',
})
}));
chart_nps = series;
series.slices.template.setAll({
templateField: 'config',
calculateAggregates: true
});
series.labels.template.setAll({
text: '[#333333 bold]{category}[/]n[#333]{sum} / {valuePercentTotal.formatNumber('0.0')}%[/]',
});
series.$label = container.children.push(am5.Label.new(root, {
text: res[0] && res[0].NPS || '-%',
fontSize: 22,
fontWeight: '500',
fill: am5.color(0xffffff),
stroke: am5.color(0xffffff),
textAlign: 'center',
y: am5.percent(50),
x: am5.percent(50),
centerX: am5.percent(50),
centerY: am5.percent(100),
paddingTop: 0,
paddingBottom: 0
}));
series.data.setAll([{
name: 'root',
children: [{
name: 'Unsatisfied',
children:
res.filter(obj => obj.name <= 4),
config: {
fill: '#f9665b',
}
},
{
name: 'Neutral',
children:
res.filter(obj => [5, 6].includes(obj.name)),
config: {
fill: '#fbef82',
}
},
{
name: 'Satisfied',
children:
res.filter(obj => obj.name >= 7),
config: {
fill: '#60e26f',
}
}]
}]);
series.selectDataItem(series.dataItems[0]);
series.appear(1000, 100);
</code>
res.forEach(note => note.config = {
fill: note.name <= 4 ? '#f9665b' : note.name <= 6 ? '#fbef82' : '#60e26f',
});
if (chart_nps) {
chart_nps.$label.set('text', res[0] && res[0].NPS || '-%');
chart_nps.data.setAll([{
name: 'root',
children: [{
name: 'Unsatisfied',
children:
res.filter(obj => obj.name <= 4),
config: {
fill: '#f9665b',
}
},
{
name: 'Neutral',
children:
res.filter(obj => [5, 6].includes(obj.name)),
config: {
fill: '#fbef82',
}
},
{
name: 'Satisfied',
children:
res.filter(obj => obj.name >= 7),
config: {
fill: '#60e26f',
}
}]
}]);
chart_nps.selectDataItem(chart_nps.dataItems[0]);
chart_nps.appear(1000, 100);
return;
}
var root = am5.Root.new('nps_recept');
root.setThemes([
am5themes_Animated.new(root)
]);
var container = root.container.children.push(am5.Container.new(root, {
width: am5.percent(100),
height: am5.percent(100),
layout: root.verticalLayout
}));
var series = container.children.push(am5hierarchy.Sunburst.new(root, {
singleBranchOnly: true,
downDepth: 10,
initialDepth: 10,
topDepth: 1,
innerRadius: am5.percent(20),
valueField: 'value',
categoryField: 'name',
childDataField: 'children',
calculateAggregates: true,
tooltip: am5.Tooltip.new(root, {
stroke: '#333333',
})
}));
chart_nps = series;
series.slices.template.setAll({
templateField: 'config',
calculateAggregates: true
});
series.labels.template.setAll({
text: '[#333333 bold]{category}[/]n[#333]{sum} / {valuePercentTotal.formatNumber('0.0')}%[/]',
});
series.$label = container.children.push(am5.Label.new(root, {
text: res[0] && res[0].NPS || '-%',
fontSize: 22,
fontWeight: '500',
fill: am5.color(0xffffff),
stroke: am5.color(0xffffff),
textAlign: 'center',
y: am5.percent(50),
x: am5.percent(50),
centerX: am5.percent(50),
centerY: am5.percent(100),
paddingTop: 0,
paddingBottom: 0
}));
series.data.setAll([{
name: 'root',
children: [{
name: 'Unsatisfied',
children:
res.filter(obj => obj.name <= 4),
config: {
fill: '#f9665b',
}
},
{
name: 'Neutral',
children:
res.filter(obj => [5, 6].includes(obj.name)),
config: {
fill: '#fbef82',
}
},
{
name: 'Satisfied',
children:
res.filter(obj => obj.name >= 7),
config: {
fill: '#60e26f',
}
}]
}]);
series.selectDataItem(series.dataItems[0]);
series.appear(1000, 100);
New contributor
Gaspar is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.