Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Unable to configure toolbox features using custom theme #654

Open
gacolitti opened this issue Feb 24, 2025 · 2 comments
Open

Unable to configure toolbox features using custom theme #654

gacolitti opened this issue Feb 24, 2025 · 2 comments

Comments

@gacolitti
Copy link

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:

Image

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)

Image
@JohnCoene
Copy link
Owner

Thanks for sharing this.

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

@gacolitti
Copy link
Author

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:

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@JohnCoene @gacolitti