Search code examples
c#blazorcurrencyblazor-webassemblyapexcharts

How to get comma separated values from blazor wrapper for Apexchart

I have used ApexChart to create a simple chart. Following you can see a screenshot of it enter image description here

my apex chart component razor file is this.

    <ApexChart @ref=_detailsChart TItem="ActualVsBudgetedIncomeResponse"
                              Title="ACTUAL VS BUDGETED INCOME"
                              Debug>

                                  <ApexPointSeries TItem="ActualVsBudgetedIncomeResponse"
                                                   Items="response_for_actual_vs_budgeted_income_Response"
                                                   Name="Actual Income"
                                                   SeriesType="SeriesType.Bar" 
                                                   XValue="@(e => e.YYYY_MM)"
                                                   YValue="@(e => Convert.ToDecimal(e.Income))"
                                                   OrderByDescending="e=>e.X"/>

                                  <ApexPointSeries TItem="ActualVsBudgetedIncomeResponse"
                                                   Items="response_for_actual_vs_budgeted_income_Response"
                                                   Name="Budgeted Income"
                                                   SeriesType="SeriesType.Bar" 
                                                   XValue="@(e => e.YYYY_MM)"
                                                   YValue="@(e => Convert.ToDecimal(e.BgtIncome))"
                                                   OrderByDescending="e=>e.X"/>

 </ApexChart>

in the above figure, you can see that the actual income values are not comma-separated values. these values are very hard to read sometimes. budgeted incomes are behaving like this.

let's consider the Actual-Income value, this YValue="@(e => Convert.ToDecimal(e.Income))" line is responsible to get actual income values. I am getting this income as double type from the database. So I have to convert it to decimal type to include here.

My final requirement is however getting comma-separated value for this Actual income and Budgeted income (as an example I should get 29,321,000 for the marked value on the above chart). how can I do this??, please help me. appreciate all your answers.

Solution

  • You can pass some javascript as a formatter, something like this.

    options.Yaxis.Add(new YAxis
        {
            Labels = new AxisLabels
            {
                Formatter = @"function (value) {
                return '$' + Number(value).toLocaleString();}"
            }
        }
    );

    If you are using webassembly you also have the option to use .net as a formatter, Using the FormatYAxisLabel

       <ApexChart TItem="Order"
           Title="Order Net Value"
           FormatYAxisLabel="GetYAxisLabel">


private string GetYAxisLabel(decimal value)
{
    return "$" + value.ToString("N0");
}

    Details https://apexcharts.github.io/Blazor-ApexCharts/features/formatters