echarts4r Unable to configure toolbox features using custom theme

Assuming I have a custom theme file custom-theme.json with the following:

{
    "toolbox": {
        "feature": {
            "dataZoom": {
                "yAxisIndex": "none"
            },
            "restore": {}
        }

    }
}

and then run:

library(echarts4r)

d <- data.frame(
  x = 1:10,
  y = 1:10
)

d |> 
  e_chart(x = x) |> 
  e_line(y) |> 
  e_theme_custom("custom-theme.json")

I get the following plot without datazoom:

But this works as expected:

library(echarts4r)

opts <- list(
  xAxis = list(
    type = "value",
    data = d$x
  ),
  yAxis = list(
    type = "value"
  ),
  series = list(
    list(
      type = "line",
      data = d$y
    )
  ),
  toolbox = list(
    feature = list(
      dataZoom = list(
        yAxisIndex = "none"
      ),
      restore = list(
      )
    )
  )
)

e_charts() |>
  e_list(opts)

Feb 24 '25 15:02 gacolitti

Thanks for sharing this.

This is to be expected, the custom theme is passed to registerTheme, themes don't include these specifications I think.

Feb 25 '25 09:02 JohnCoene

Actually, I think as long as the toolbox is enabled in the chart options, the theme should be able to configure many of the options related to the toolbox.

Here is an example where I enable & disable certain toolbox features and configure the datazoom feature to ignore y-axis:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts Test</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px; height: 400px;"></div>

    <script>
        // Define the custom theme with dataZoom and toolbox configurations
        const myTheme = {
            toolbox: {
                feature: {
                    dataZoom: { show: true, yAxisIndex: "none" },
                    saveAsImage: { show: false },
                    dataView: { show: false },
                    restore: { show: true }
                }
            },
            // You can include other general theme options here (e.g., colors, fonts)
        };

        // Register the theme with ECharts
        echarts.registerTheme('myCustomTheme', myTheme);

        // Create a chart using the custom theme
        const chart = echarts.init(document.getElementById('main'), 'myCustomTheme');

        // Set chart options
        const option = {
            title: {
                text: 'ECharts Test with Custom Theme',
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            },
            yAxis: {
                type: 'value',
            },
            toolbox: {
                show: true
            },
            series: [
                {
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                },
            ],
        };

        // Set the options for the chart
        chart.setOption(option);
    </script>
</body>
</html>

which produces the expected output and functionality:

Feb 25 '25 14:02 gacolitti