syampillai / SOCharts

A wrapper around the "echarts" JavaScript library to use it as a Vaadin component.
Apache License 2.0
27 stars 11 forks source link

Chart dark mode #11

Closed gidravlic closed 1 year ago

gidravlic commented 1 year ago

Add the ability to use dark mode for chart. Something like:

updateChart(full, options, darkMode) {
        if(full) {
            this.allOptions = options;
        }
        var json = JSON.parse(options);
        this._stuff(json);
        if(!this.chart || this.chart == null) {
            darkMode = typeof darkMode !== "undefined" ? darkMode : null;
            this.chart = echarts.init(this.shadowRoot.getElementById(this.idChart), darkMode);
        }
        this.events.forEach(event => {
            this.chart.on(event.event, {name: event.data}, params => {
               console.log(event.event);
               console.log(event.data);
               this.$server.runEvent(event.event, event.data);
           })
        });
        this.chart.setOption(json);
    }

and call

executeJS("updateChart", !skipData, customizeJSON(sb.toString()));

or

executeJS("updateChart", !skipData, customizeJSON(sb.toString()), "dark");

Thanks

syampillai commented 1 year ago

You can use the SOChart.setDarkMode() method available in the latest version. Thanks for the example code.