How to start legend content from right corner in arabic language

39 views Asked by At

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 . 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;

Pie chart in arabic language

As you can see my first legend is الرياض it should start from right corner instead of left

0

There are 0 answers