Set font sizes on individual labels in anychart - anychart

Question

I have a pie chart that I'm creating using anychart.
The pie chart labels are all using the correct font-family and color, but what I want to do is be able to set different font sizes for each piece. I want to set the font size to be larger on the largest slice.
Here is my Fiddle
Here is my javascript
<script type="text/javascript">
var chart;
var labels;
anychart.onDocumentReady(function () {
//dataset
var data = anychart.data.set([
{ name: "$0-$50,000", value: 68, labelText: "68%", toolTip: "68%", title: "$0-$50,000" },
{ name: "$50,000-$100,000", value: 13, labelText: "13%", toolTip: "13%", title: "$50,000-$100,000" },
{ name: "$100,000-$150,000", value: 6, labelText: "6%", toolTip: "6%", title: "$100,000-$150,000" },
{ name: "$150,000-$250,000", value: 6, labelText: "6%", toolTip: "6%", title: "$150,000-$250,000" },
{ name: "$250,000 - plus", value: 7, labelText: "7%", toolTip: "7%", title: "$250,000 - plus" }
])
//set chart variable
chart = anychart.pie(data);
//Set labels to pull from data
labels = chart.labels();
labels.textFormatter('{%labelText}');
//Format tooltip content and styles
var tooltip = chart.tooltip();
tooltip.textFormatter('{%toolTip}');
tooltip.titleFormatter('{%title}');
tooltip.separator(true);
tooltip.fontFamily('PT Sans');
tooltip.fontSize(18);
tooltip.title().fontFamily('PT Sans');
tooltip.title().fontSize(18);
tooltip.title().align('center');
//adjust legend
var legend = chart.legend();
legend.enabled(true);
legend.position("left");
legend.align("center");
legend.itemsLayout("vertical");
legend.fontFamily('PT Sans');
//adjust font
var labels = chart.labels();
labels.fontColor('white');
labels.fontFamily('PT Sans');
labels.fontSize(36);
//create title
var title = chart.title();
title.text("68% of Rollovers Involve Less Than $50,000");
title.enabled(true);
title.fontColor('Red');
title.fontSize('48');
title.fontFamily('PT Sans');
title.fontWeight('700');
//inner radius makes this a doughnut chart instead of pie
chart.innerRadius("30%");
//define the container
chart.container("Container");
chart.animation(true);
//set delay to recall draw ch art to
chart.draw();
});
</script>
And here is a photo I've created in photoshop to show what I'm trying to achieve

Answer 1

The easiest way to do that is to put label object right into the data:
anychart.onDocumentReady(function() {
//dataset
var data = anychart.data.set([{
name: "$0-$50,000",
value: 68,
labelText: "68%",
toolTip: "68%",
title: "$0-$50,000",
label: {
fontColor: "Blue",
fontSize: 20
}
}, {
name: "$50,000-$100,000",
value: 13,
labelText: "13%",
toolTip: "13%",
title: "$50,000-$100,000",
label: {
fontColor: "Blue",
fontSize: 10
}
}, {
name: "$100,000-$150,000",
value: 6,
labelText: "6%",
toolTip: "6%",
title: "$100,000-$150,000",
label: {
fontColor: "Blue",
fontSize: 9
}
}, {
name: "$150,000-$250,000",
value: 6,
labelText: "6%",
toolTip: "6%",
title: "$150,000-$250,000",
abel: {
fontColor: "Green",
fontSize: 8
}
}, {
name: "$250,000 - plus",
value: 7,
labelText: "7%",
toolTip: "7%",
title: "$250,000 - plus",
label: {
fontColor: "Red",
fontSize: 7
}
}]);
//set chart variable
chart = anychart.pie(data);
chart.overlapMode(true);
//Set labels to pull from data
labels = chart.labels();
labels.textFormatter('{%labelText}');
//Format tooltip content and styles
var tooltip = chart.tooltip();
tooltip.textFormatter('{%toolTip}');
tooltip.titleFormatter('{%title}');
tooltip.separator(true);
tooltip.fontFamily('PT Sans');
tooltip.fontSize(18);
tooltip.title().fontFamily('PT Sans');
tooltip.title().fontSize(18);
tooltip.title().align('center');
//adjust legend
var legend = chart.legend();
legend.enabled(true);
legend.position("left");
legend.align("center");
legend.itemsLayout("vertical");
legend.fontFamily('PT Sans');
//adjust font
//var labels = chart.labels();
labels.fontColor('white');
labels.fontFamily('PT Sans');
//create title
var title = chart.title();
title.text("68% of Rollovers Involve Less Than $50,000");
title.enabled(true);
title.fontColor('Red');
title.fontSize('48');
title.fontFamily('PT Sans');
title.fontWeight('700');
//inner radius makes this a doughnut chart instead of pie
//chart.innerRadius("30%");
//define the container
chart.container("container");
chart.animation(true);
//set delay to recall draw ch art to
chart.draw();
});
<script src="https://cdn.anychart.com/js/7.12.0/anychart-bundle.min.js"></script>
<div id="container"></div>
Label object goes like this:
label: {
fontColor: "Blue",
fontSize: 20
}
Here is a sample on jsfiddle: http://jsfiddle.net/g3r57cee/
Some more information on labels can be found at http://docs.anychart.com/latest/Common_Settings/Labels