Image Patterns for Charts

Webix JS
#1

Hello. Some chart libraries (like AmCharts and ECharts) allow the usage of image patterns for their charts - so instead of providing a string for the color, you can pass a image source as a pattern to be applied. However, it seems that Webix charts only allows strings and functions (that returns a string at the end). Is there a way to work with image patterns in Webix charts?

#2

Hello @ThiagoBuzzo ,

Is there a way to work with image patterns in Webix charts?
Unfortunately, there is no such functionality.
However, the Webix UI library supports a number of various integrations with third-side JS libraries.
A custom Webix widget (usually based on primary ui.view) can serve as a container for a third-party widget (in other words, for any html content)
Please take a look at the basic example with ECharts (the solution can be extended per your requirements):
https://snippet.webix.com/633lznul

The webix.protoUI which results in a Webix custom component is quite simple here. It features just:

  • rendering,
  • passing ECharts config from configuration of Webix view
  • resizing
  • ability to get the nested instance of ECharts chart to use its API

All mentioned features are implemented in the following code:

 // custom echart view
  webix.protoUI({
    name:"webix-echart",
    $init:function(config){
      this.$view.innerHTML = "<div style='width:100%; height:100%;'></div>";
      // 'config' can be used to access parameters of the declared webix view
      this._initChart(config);	
    },
    // resize chart on Webix view resize
    $setSize:function(x,y){  
      if (webix.ui.view.prototype.$setSize.call(this,x,y))
        this.getChart().resize();      
    },
    // a custom 'private' method where chart is initialized in view node
    _initChart:function(config){
      this._chart = echarts.init(this.$view.firstChild);
    },
    // a custom 'public' method
    getChart:function(){
      return this._chart;
    }
  }, webix.ui.view);

Please check documentation for getting information about integrations with different charting libraries here

#3

Thank you for the answer @annazankevich . I need to use it for Pivot Chart as well, would that work? I’m not sure if this would be possible because the pivot has a chart component internaly and I don’t think I can change this.