How to bring Echarts personalization to Shimoku?

​
You can use Echarts console to develop new sort of charts:
Examples - Apache ECharts
And then create them in Shimoku. Let’s see an example:
Let’s suppose we have the following Echarts options
option = {
  title: {
    text: 'Yesterday performance comparison'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: ['RevPAR', 'RevPOR', 'ADR', 'Occupancy', 'Revenues']
  },
  series: [
    {
      name: 'Yesterday performance',
      type: 'bar',
      color: '#c23531',
      data: [{
               value: 92,
               itemStyle: {
               color: '#c23531' 
               },
              label: {
              formatter: '75€',
              show: true,
              },
             },
             {
               value: 88,
               itemStyle: {
               color: '#c23531' 
               },
              label: {
              formatter: '230€',
              show: true,
              },
             },
             {
               value: 103,
               itemStyle: {
               color: '#73a373' 
               },
              label: {
              formatter: '150€',
              show: true,
              }
             },
             {
               value: 70,
               itemStyle: {
               color: '#c23531' 
               },
              label: {
              formatter: '65%',
              show: true,
              },
             },
             {
               value: 98,
               itemStyle: {
               color: '#c23531' 
               },
              label: {
              formatter: '5000€',
              show: true,
              },
             },
      ],
      barGap: 0,
      barCategoryGap: '50%',
      showBackground: true,
​
    },
    {
      name: 'Yesterday goal',
      type: 'bar',
      data: [{
              value: 100,
              label: {
              formatter: '90€',
              show: true,
              },
             },
             {
              value: 100,
              label: {
              formatter: '280€',
              show: true,
              },
             },
             {
              value: 100,
              label: {
              formatter: '143€',
              show: true,
              }
             },
             {
              value: 100,
              label: {
              formatter: '88%',
              show: true,
              },
             },
             {
              value: 100,
              label: {
              formatter: '5050€',
              show: true,
              },
             },
      ],
      color: '#7289ab'
    }
  ]
};
That looks like this:
How do we include this chart configuration in Shimoku?
Regarding how to use the components as Echarts, you have for all charts of the SDK the fieldoption_modifications  and you can pass Echarts variables in there. Example:
options = {
   'dataZoom': False,
   'xAxis': {'type': 'value'},
   'yAxis': {'type': 'category'},        
}
​
shimoku.plt.bar(
   ..., 
   option_modifications=options,
)
Note that is doing copy+paste the concrete configuration you want to include from echarts but with Python grammatic.
Hence, in your specific case, it would be like the following (note that you do not need to specify data in the option_modifications because our system merges everything under the hood)
options = {
  'tooltip': {
    'trigger': 'axis',
    'axisPointer': {
      'type': 'shadow'
    }
  },
  'grid': {
    'left': '3%',
    'right': '4%',
    'bottom': '3%',
    'containLabel': True
  },
  'xAxis': {
    'type': 'value',
    'boundaryGap': [0, 0.01]
  },
  'yAxis': {
    'type': 'category',
  },
  'series': {
     'barGap': 0,
     'barCategoryGap': '50%',
     'showBackground': true,
  }
}

Hubspot

Next - Releases

2022

Last modified 3mo ago

Copy link