Issue with the Pie chart and it's labels
Posted by Vishal shukla at 16:06 on Wednesday 16th June 2021 [link]
Sir actually I am making a pai chart it's labels actually outside I wants it inside the pai chart so how I can done this please let me know as soon as possible you can see the my code just given below.
function ProductModel() {
RGraph.AJAX.getJSON({
url: '/Home/ProductModelForGraph' , callback: function (json) {
var Ids1 = [];
var IDs = [];
var IDs2 = [];
$(json.getData).each(function (index, value1) {
IDs.push(this.BomId);
IDs2.push(this.ModelName);
Ids1.push([this.ModelName, this.BomId ]);
});
alert(Ids1);
var colors = ['#45B39D', '#9bccf2', '#034f84', '#8044C1', '#2999CD', '#C8C02A', '#36C461', '#36C49F'];
var key = RGraph.HTML.Key('container',
{
colors: colors,
labels: Ids1,
tableCss: {
position: 'absolute',
top: '50%',
right: '-575px',
transform: 'translateY(-50%)',
colors: colors
}
});
new RGraph.Pie({
id: 'ProductModelGraph',
data: IDs,
options: {
vv: IDs2,
marginLeft: 20,
title: 'Product Model Wise Costing Count',
titleSize: 20,
labelsColor: '#0095cd',
titleBold: true,
marginRight: 50,
linewidth: 0,
colorsStroke: 'rgba(0,0,0,0)',
colors: colors,
variant: 'donut3d',
radius: 100,
radius: 80,
shadowOffsety: 4,
shadowOffsetx: 5,
shadowColor: '#aaa',
exploded: [5, 5, 5],
titleColor: '#0095cd',
textSize: 20,
tooltips: '<span style="font-size: 14pt;">%{property:vv[%{index}]}: %{value}</span>',
tooltipsFormattedKeyColors: ['#aaf', 'green'],
tooltipsPointer: false,
tooltipsPositionStatic: false,
tooltipsEvent: 'mousemove',
tooltipsCss: {
fontFamily: 'Verdana',
fontSize: '20pt',
color: 'white',
border: 'groove',
//backgroundColor: '#0095cd',
},
}
}).roundRobin();
RGraph.tooltips.style.backgroundColor = '%{property:colors[%{index}]}';
}
});
}
function ProductModel() {
RGraph.AJAX.getJSON({
url: '/Home/ProductModelForGraph' , callback: function (json) {
var Ids1 = [];
var IDs = [];
var IDs2 = [];
$(json.getData).each(function (index, value1) {
IDs.push(this.BomId);
IDs2.push(this.ModelName);
Ids1.push([this.ModelName, this.BomId ]);
});
alert(Ids1);
var colors = ['#45B39D', '#9bccf2', '#034f84', '#8044C1', '#2999CD', '#C8C02A', '#36C461', '#36C49F'];
var key = RGraph.HTML.Key('container',
{
colors: colors,
labels: Ids1,
tableCss: {
position: 'absolute',
top: '50%',
right: '-575px',
transform: 'translateY(-50%)',
colors: colors
}
});
new RGraph.Pie({
id: 'ProductModelGraph',
data: IDs,
options: {
vv: IDs2,
marginLeft: 20,
title: 'Product Model Wise Costing Count',
titleSize: 20,
labelsColor: '#0095cd',
titleBold: true,
marginRight: 50,
linewidth: 0,
colorsStroke: 'rgba(0,0,0,0)',
colors: colors,
variant: 'donut3d',
radius: 100,
radius: 80,
shadowOffsety: 4,
shadowOffsetx: 5,
shadowColor: '#aaa',
exploded: [5, 5, 5],
titleColor: '#0095cd',
textSize: 20,
tooltips: '<span style="font-size: 14pt;">%{property:vv[%{index}]}: %{value}</span>',
tooltipsFormattedKeyColors: ['#aaf', 'green'],
tooltipsPointer: false,
tooltipsPositionStatic: false,
tooltipsEvent: 'mousemove',
tooltipsCss: {
fontFamily: 'Verdana',
fontSize: '20pt',
color: 'white',
border: 'groove',
//backgroundColor: '#0095cd',
},
}
}).roundRobin();
RGraph.tooltips.style.backgroundColor = '%{property:colors[%{index}]}';
}
});
}
Posted by Richard at 18:08 on Wednesday 16th June 2021 [link]
Since you're using a 3D Pie/Donut chart maybe this would suit you:
https://codepen.io/rgraph/pen/yLMZMEN/left
If not then maybe setting the labels to be native canvas text with the textAccessible option (set it to false) and the labelsIngraph* options may be useful.
https://codepen.io/rgraph/pen/yLMZMEN/left
If not then maybe setting the labels to be native canvas text with the textAccessible option (set it to false) and the labelsIngraph* options may be useful.
[Replies are now closed]