var isfullView = 'None';
languageId='1';
isLegendBottom = '0';
var chartdiv = document.getElementById('chartdiv');
// if(isLegendBottom == 1){
// }
// else{
// chartdiv.style.height = '230px';
// }
var chart = am4core.create("chartdiv", am4charts.PieChart3D);
chart.logo.disabled = true;
chart.hiddenState.properties.opacity = 0;
am4core.options.queue = true;
am4core.options.onlyShowOnViewport = true;
var PieColors = JSON.parse("['#04275C', '#C3E2F8', '#5e9bbd', '#8797AF', '#E6E8EF', '#FAF5E4']".replaceAll(''','\"'))
var LabelColors = JSON.parse("['#fff', '#04275c', '#ffffff', 'c3e2f8', '000000', '04275c']".replaceAll(''','\"'))
var position = "bottom";
if(isLegendBottom == 1){
if(languageId == 1){
position = "right";
}
else{
position = "left"
}
chartdiv.style.height = '70vh';
chartdiv.style.display = "inline-block";
chartdiv.style.width = "50%";
}
else{
if (isfullView === '1') {
chartdiv.style.height = '92vh';
} else {
chartdiv.style.height = '90vh';
}
var legendDiv = document.getElementById("legendDiv");
legendDiv.remove();
}
data= JSON.parse("[{'EntityID': 4604, 'EntityName': 'الرياض', 'Value': 1417.98}, {'EntityID': 4604, 'EntityName': 'جدة', 'Value': 303.0}, {'EntityID': 4604, 'EntityName': 'الخبر', 'Value': 174.0}, {'EntityID': 4604, 'EntityName': 'واشنطن', 'Value': 102.0}, {'EntityID': 4604, 'EntityName': 'الدمام', 'Value': 97.0}, {'EntityID': 4604, 'EntityName': 'كاليفورنيا', 'Value': 92.5}, {'EntityID': 4604, 'EntityName': 'بنسلفانيا', 'Value': 60.0}, {'EntityID': 4604, 'EntityName': 'دالاس', 'Value': 45.0}, {'EntityID': 4604, 'EntityName': 'بروكسل', 'Value': 24.0}]".replaceAll(''','\"'))
// Set up the chart
chart.data = data;
//chart.innerRadius = am4core.percent(40);
chart.depth = 35;
chart.angle = 40;
/// Create series of type PieSeries3D will be responsible for rendering the slices of the pie chart
var series = chart.series.push(new am4charts.PieSeries3D());
series.dataFields.value = "Value"; //"Value" "Percentage"
series.dataFields.category = "EntityName";//"EntityName" "Labels"
for (let i = 0; i < PieColors.length; i++) {
series.colors.list.push(am4core.color(PieColors[i]));
}
// // Configure appearance{value.percent.formatNumber('#.0')
// series.ticks.template.disabled = true;
// series.labels.template.disabled = true;
series.ticks.template.disabled = true;
series.slices.template.tooltipText = "[bold]{value.percent.formatNumber('#.0')}";
series.ticks.template.disabled = true;
series.labels.template.fontSize = '15px';
series.alignLabels = false;
series.labels.template.text = "{value.percent.formatNumber('#.0')}%";
series.labels.template.radius = am4core.percent(-35);
series.labels.template.fontWeight = "bold";
series.labels.template.adapter.add("text", function(text, target) {
var dataItem = target.dataItem;
if (dataItem) {
var index = dataItem.index;
if (index >= 2) {
return ""; // Disable label for index >= 2
}
return text;
}
return text;
});
series.labels.template.adapter.add("fill", function(fill, target) {
// Get the current data item
var dataItem = target.dataItem;
// Set a different label color for each slice
if (dataItem) {
var index = dataItem.index;
var colors = LabelColors;
return am4core.color(colors[index % colors.length]);
}
return fill;
});
chart.paddingTop = 7;
if(isLegendBottom != 1){
chart.legend = new am4charts.Legend();
chart.legend.labels.template.fontSize = isfullView == 1 ? '100%' : '70%';
chart.legend.horizontalGap = 0;
// chart.legend.tooltipX = am4core.percent(0); // Adjust the X position as needed
// chart.legend.tooltipY = am4core.percent(-100);
chart.legend.itemContainers.template.paddingTop =0 ;
chart.legend.itemContainers.template.paddingBottom =4 ;
chart.legend.tooltip.dy = -10;
chart.legend.valueLabels.template.disabled = true;
chart.legend.position = position; //
chart.radius = am4core.percent(90);
chart.depth = isfullView == 1 ? 55 : 45;
chart.legend.tooltip.background.fill = am4core.color("#d9efff");
chart.legend.tooltip.label.fill = am4core.color("#00337d");
chart.legend.tooltip.getFillFromObject = false; // Disable automatic color selection
var LegendTextTooltip = "{Value.formatNumber('#,###.##')}";
chart.legend.itemContainers.template.tooltipHTML = '<div class="ChartToolTip" ><b>'+LegendTextTooltip+'</div>';
}
// Create a separate container for the legend
else{
var legendContainer = am4core.create("legendDiv", am4core.Container);
legendContainer.width = am4core.percent(100);
legendContainer.height = am4core.percent(100);
if(languageId == 1){
legendContainer.rtl = true;
}
legendContainer.logo.disabled = true;
chart.legend = new am4charts.Legend();
chart.legend.parent = legendContainer;
chart.legend.labels.template.fontSize = '3vw';
chart.legend.horizontalGap = 0;
chart.legend.position = position;
chart.legend.itemContainers.template.paddingTop = 0;
chart.legend.valueLabels.template.disabled = true;
chart.legend.tooltip.getFillFromObject = false; // Disable automatic color selection
chart.legend.tooltip.background.fill = am4core.color("#d9efff");
// chart.legend.tooltip.background.stroke = am4core.color("#00337d");
chart.legend.tooltip.label.fill = am4core.color("#00337d");
chart.legend.itemContainers.template.tooltipHTML = '<div class="ChartToolTip">{name}</div>';
// chart.legend.tooltip.fontSize = "11px";
chart.radius = am4core.percent(90);
let marker = chart.legend.markers.template.children.getIndex(0);
chart.legend.width = 160;
marker.cornerRadius(12, 12, 12, 12);
marker.strokeWidth = 2;
marker.strokeOpacity = 1;
marker.stroke = am4core.color("#ccc");
}
if(languageId == 1){
var forrtlDiv = document.getElementById('forrtl');
forrtlDiv.style.direction = 'rtl';
chart.legend.itemContainers.template.reverseOrder = true;
chart.rtl = true;
}
chart.legend.labels.template.fontFamily = "Arial";
chart.legend.maxColumns = 6;
var markerTemplate = chart.legend.markers.template;
markerTemplate.width = 10; // Decrease marker width
markerTemplate.height = 10; // Decrease marker height
chart.background.fill = '#f7f7f7'
chart.background.opacity = 0.9
.chart_div div {
padding-top: 00px;
}
.ChartToolTip{
max-width: 100px !important;
white-space: normal !important;
/* position: relative; */
padding:0 0px 2px 0px;
font-size: 12px !important;
margin-top: -2px;
}
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<div id="forrtl">
<div id="chartdiv" class="chart_div" style="margin-bottom: 0; "></div>
<div id="legendDiv" style="display: inline-block; width: 48%; padding-top: 0px; height: 74vh; vertical-align: top;"></div>
</div>
I am plotting Pie chart using amcharts4 . It is working fine in english as the legends are appearing from left most corner . but in arabic I want to start the legend from right most corner .
I've tried different approach which reflects on the chart as well but it is not working and fulfil what i needs.
I've tried these things
chart.legend.itemContainers.template.reverseOrder = true;
chart.rtl = true;
As you can see my first legend is الرياض it should start from right corner instead of left