right to left direction for canvasjs Pie chart

Question

right to left direction for canvasjs Pie chart

1.5k views Asked by Z Khanian At 23 October 2024 at 16:46

I have already tried use Canvas JavaScript pie chart in my ASP.Net web application and my web form direction is right to left but label and legend of chart disordered.

Original Q&A

There are 3 answers

**Z Khanian** · Answer 1 · 2015-06-13 07:23:57

this is my code

        window.onload = function () {
            var chart = new CanvasJS.Chart("chartContainer",
            {
                title: {
                    text: "Top Categoires of New Year's Resolution"
                },
                exportFileName: "Pie Chart",
                exportEnabled: true,
                animationEnabled: true,
                legend: {
                    verticalAlign: "bottom",
                    horizontalAlign: "center",
                    fontFamily: "tahoma"
                },
                data: [
                {
                    type: "pie",
                    showInLegend: true,
                    toolTipContent: "{legendText}: <strong>{y}%</strong>",
                    indexLabel: "{label} {y}%",
                    dataPoints: [
                        { y: 35, legendText: "Mahan Company for Mines & Industries Developmentشركت گسترش صنايع و معادن ماهان(سهامي خاص) ", exploded: true, label: "Mahan Company for Mines & Industries Developmentشركت گسترش صنايع و معادن ماهان(سهامي خاص)" },
                        { y: 20, legendText: "OILMICOشركت بين المللي طراحي و مهندسي ساخت صنايع نفت (سهامي خاص)", label: "OILMICOشركت بين المللي طراحي و مهندسي ساخت صنايع نفت (سهامي خاص)" },
                        { y: 18, legendText: "شركت مهندسي ايساتيس پوياي ايرانيان(اركان رويان كوير)", label: "شركت مهندسي ايساتيس پوياي ايرانيان(اركان رويان كوير)" },
                        { y: 15, legendText: "شركت صنايع لمينت و بسته بندي نفيس كار افرين", label: "شركت صنايع لمينت و بسته بندي نفيس كار افرين" },
                        { y: 5, legendText: "سازمان صنايع دريايي-گروه شناورهاي زير سطحي", label: "سازمان صنايع دريايي-گروه شناورهاي زير سطحي" },
                        { y: 7, legendText: "ايسيكو(شركت مهندسي خدمات صنعتي ايران خودرو", label: "ايسيكو(شركت مهندسي خدمات صنعتي ايران خودرو" }
                    ]
                }
                ]
            });
            chart.render();
        }

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body dir="rtl">
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>

**Alireza Balvardi** · Answer 2 · 2017-12-23 06:14:17

Alireza Balvardi On 23 December 2017 at 06:14

Set this class on your file

<style>
.canvasjs-chart-container{float:right;}
<style>

**Alireza Balvardi** · Answer 3 · 2017-12-23 06:49:14

Alireza Balvardi On 23 December 2017 at 06:49

change

<div id="chartContainer" style="height: 300px; width: 100%;"></div>

with

<div id="chartContainer" style="height: 300px; width: 100%;direction: ltr;"></div>

its work very good

TechQA.

right to left direction for canvasjs Pie chart

There are 3 answers

Related Questions in RIGHT-TO-LEFT

Related Questions in CANVASJS

Popular Questions

Popular Tags

Trending Questions