I use the Apexcharts JS library to draw graphs in my Phoenix application. The Apexchart integration is done according to this example.

I want to use custom tooltips as in the example from Apexcharts docs:

tooltip: {
  y: {
    formatter: function(value, { series, seriesIndex, dataPointIndex, w }) {
       return value
     }
  }
 }

But I don’t know how to call the js function inside heex. I tried it like this:

<.chart
   id="chart1"
   chartset={%{
     chart: %{
       type: "line",
       height: 450,
       toolbar: %{
         show: false
       }
      },
     series: [%{
       name: "CPU usage",
       data: @series
     }],
     xaxis: %{
       categories: @categories,
     },
     yaxis: %{
       title: %{
         text: "Average CPU usage, %",
       },
       min: 0,
       max: 100
     },
     tooltip: %{
       y: %{
         formatter: function(value, { series, seriesIndex, dataPointIndex, w }) {
           return value
         }
       }
     }
   }}
 />

and got the following error:

error: syntax error before: '{'
    │
 47 │ ...  formatter: function(value, { series, seriesIndex, dataPointIndex, w }) {
    │                                                                             ^
    │
    └─ lib/monitor_web/live/statistic_live/show_cpu.html.heex:47:100

Does anyone have any ideas? (it works without tooltip section)