Rails 7 - Format y-axis to dollars

[bweathers3]

I am trying to to format my y-axis key to be USA dollars rather than just a number value.

My code in the view is as follows:

<h2>Revenue vs Expenses</h2>
​
<% series = [
  {name: "Revenue", data: @rev_chart},
  {name: "Expenses", data: @exp_chart}
] %>
​
<% options = {
  title: 'Revenue vs Expenses',
  subtitle: 'Grouped Per Month',
  xtitle: 'Months',
  ytitle: 'Dollars',
} %>

<%= column_chart(series, {**options, theme: 'overview_bar_chart_palette', stacked: false, data_labels: false}) %>

The initializer code:

ApexCharts::Theme.create "overview_bar_chart_palette", ["#008FFB", "#FF9800"]

So basically 100.00, 200.00, 300.00 etc. would be formatted to $100.00, $200.00, $300.00 on the y-axis key.

[styd]

Hi, @bweathers3 . Sorry for a late reply. I was on a vacation.

Have you tried using formatter function?
I think you can try adding formatter for y-axis' label:

<% options = {
  title: 'Revenue vs Expenses',
  subtitle: 'Grouped Per Month',
  xtitle: 'Months',
  ytitle: 'Dollars',
  yaxis: {
    labels: {
      formatter: {
        function: {
          args: "val",
          body: "return '$' + parseFloat(val).toLocaleString();"
        }
      }
    }
  } 
} %>

You can also do so for the dataLabels.

[bweathers3]

Adrian, Thanks so much, that worked perfectly. Bailey

…

On Sun, Aug 7, 2022 at 7:36 PM Adrian Setyadi ***@***.***> wrote: Hi, @bweathers3 <https://github.com/bweathers3> . Sorry for a late reply. I was on a vacation. Have you tried using formatter function <https://github.com/styd/apexcharts.rb#formatter-function>? I think you can try adding formatter for y-axis' label: <% options = { title: 'Revenue vs Expenses', subtitle: 'Grouped Per Month', xtitle: 'Months', ytitle: 'Dollars', yaxis: { labels: { formatter: { function: { args: "val", body: "return '$' + parseFloat(val).toLocaleString();" } } } } } %> You can also do so for the dataLabels. — Reply to this email directly, view it on GitHub <#81 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEW5SOOV5CNAK33HW7ZACKTVYBQCPANCNFSM55SQZ3SA> . You are receiving this because you were mentioned.Message ID: ***@***.***>