Problem in displaying Persian language letters in chartjs in .net core

Question

When I transfer the database information from the controller to the view with ViewData, the information related to the chart labels in Farsi is not displayed correctly. In fact, when I transfer the information from the C# list to the js array with the <text> tag The information can be transmitted in ASCII format. please help me

C# controller codes:

public IActionResult DisplayChartsProvince()
        {
            if ((User.Claims.FirstOrDefault(c => c.Type == "role").Value == "مدیریت") || (User.Claims.FirstOrDefault(c => c.Type == "role").Value == "معاونت فناوری اطلاعات"))
            {
                //نمودار دایره ای
                var data = _context.ProvinceLevel.ToList();
                var roleTitles = _context.Roles.Select(r => r.RoleTitle).ToList();
                List<int> role = new();
                List<string> roleLabels = new();
                for(int i = 0; i < roleTitles.Count; i++)
                {
                    int count = data.Where(r => r.role == roleTitles[i]).ToList().Count;
                    if(data.Where(r => r.role == roleTitles[i]).ToList().Count > 0)
                    {
                        roleLabels.Add(roleTitles[i]);
                    }
                    if (count!=0)
                    {
                    role.Add(count);
                    }
                    count = 0;
                }
                ViewData["roleTitles"] = roleLabels;
                ViewData["roleCounts"] = role;
                //////////////////////////////////////////////////////
                

                return View();
            }
            return View("NotAccessProvince");
        }

HTML Code:

@{
    ViewData["Title"] = "گزارش استان - سطح استان";
    List<string> RoleTitles = ViewData["roleTitles"] as List<string>;
    List<int> RoleCounts = ViewData["roleCounts"] as List<int>;
}
<script src="~/js/chartjs/chart.js"></script>
<div class="btn btn-outline-primary btn-sm my-1 mx-3">گزارش سطح استان</div>
<div class="w-100 d-flex my-2 px-3">
    <div class="card w-100 d-block">
        <div class="card-header text-primary">
            <i class="fa fa-pie-chart" style="background-color:"></i>
        </div>
        <div class="card-body">
            <canvas id="d1" class="chart-canvas mx-auto"></canvas>
        </div>
    </div>
</div>
@section ChartScripts{
    <script>
        var chartDataOne = [];
        var chartLabelsOne = [];
        @foreach(var item in RoleCounts)
        {
           <text>chartDataOne.push(@item);</text>
        }
        @foreach(var item in RoleTitles)
        {
           <text>chartLabelsOne.push("@item");</text>
        }
        var colors = ["blue", "yellow", "green", "orange"];
        var ctx = document.getElementById("d1").getContext("2d");
        new Chart(ctx, {
            type: "pie",
            data: {
                labels: chartLabelsOne,
                datasets: [{
                    backgroundColor: colors,
                    data: chartDataOne
                }]
            },
            options: {
                title: {
                    display: true,
                    text: "World Wide Wine Production 2018"
                }
            }
        });
        let valuesArray = chartLabelsOne.values();
        for (let item of valuesArray) {
            console.log(item);
        };
    </script>
}

Labels that are in ViewData and must be displayed:

The page is displayed:

Values stored in chartLabelsOne array to ASCII:

Answer 1

The HTML encoding engine will only safelist the basic latin alphabet,to widen the characters treated as safe by the encoder, try to add below code to your Program.cs:

builder.Services.AddSingleton<HtmlEncoder>(HtmlEncoder.Create(allowedRanges: new[] { UnicodeRanges.BasicLatin, UnicodeRanges.Arabic }));

result: