Display negative numbers as positive numbers in bar type ECharts

Panel
#1

Hello All,

I am trying to make the following EChart within panel: Examples - Apache ECharts
However, I would like to display the negative numbers as positive numbers, without affecting their positioning.

As shown here, “-210” to be listed as “210”.

image
image873×660 44.5 KB

The code is here:

import panel as pn
pn.extension(sizing_mode="stretch_width")


echart_demo = option = {
  'tooltip': {
    'trigger': 'axis',
    'axisPointer': {
      'type': 'shadow'
    }
  },
  'legend': {
    'data': ['Profit', 'Expenses', 'Income']
  },
  'grid': {
    'left': '3%',
    'right': '4%',
    'bottom': '3%',
    'containLabel': True
  },
  'xAxis': [
    {
      'type': 'value'
    }
  ],
  'yAxis': [
    {
      'type': 'category',
      'axisTick': {
        'show': False
      },
      'data': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  'series': [
    {
      'name': 'Profit',
      'type': 'bar',
      'label': {
        'show': True,
        'position': 'inside'
      },
      'emphasis': {
        'focus': 'series'
      },
      'data': [200, 170, 240, 244, 200, 220, 210]
    },
    {
      'name': 'Income',
      'type': 'bar',
      'stack': 'Total',
      'label': {
        'show': True
      },
      'emphasis': {
        'focus': 'series'
      },
      'data': [320, 302, 341, 374, 390, 450, 420]
    },
    {
      'name': 'Expenses',
      'type': 'bar',
      'stack': 'Total',
      'label': {
        'show': True,
        'position': 'left'
      },
      'emphasis': {
        'focus': 'series'
      },
      'data': [-120, -132, -101, -134, -190, -230, -210]
    }
  ]
}


echart_pane = pn.pane.ECharts(echart_demo, height=480, width=640)

template = pn.template.FastListTemplate(
    site="Demo",
    title="",
    main=[pn.Row(echart_pane)]
)

template.servable()

Thank you in advance for any hints!

Br, Sorin

#2

Hi @sorin

There are really two questions here :slight_smile:

How to format series labels in Echarts

Answer: Javascript label formatter function. See series-line.label docs

You will need to add a javascript function like

image

to your configuration. But how?

How to use a javascript function in your Echarts configuration with Panel

Answer: Custom ReactiveHTML implementation of ECharts.

I got inspiration from panel/echarts.ts.

image
image1446×782 33.2 KB 

import panel as pn
import param

pn.extension("echarts", sizing_mode="stretch_width")


configuration = {
  'tooltip': {
    'trigger': 'axis',
    'axisPointer': {
      'type': 'shadow'
    }
  },
  'legend': {
    'data': ['Profit', 'Expenses', 'Income']
  },
  'grid': {
    'left': '3%',
    'right': '4%',
    'bottom': '3%',
    'containLabel': True
  },
  'xAxis': [
    {
      'type': 'value'
    }
  ],
  'yAxis': [
    {
      'type': 'category',
      'axisTick': {
        'show': False
      },
      'data': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  'series': [
    {
      'name': 'Profit',
      'type': 'bar',
      'label': {
        'show': True,
        'position': 'inside'
      },
      'emphasis': {
        'focus': 'series'
      },
      'data': [200, 170, 240, 244, 200, 220, 210]
    },
    {
      'name': 'Income',
      'type': 'bar',
      'stack': 'Total',
      'label': {
        'show': True
      },
      'emphasis': {
        'focus': 'series'
      },
      'data': [320, 302, 341, 374, 390, 450, 420]
    },
    {
      'name': 'Expenses',
      'type': 'bar',
      'stack': 'Total',
      'label': {
        'show': True,
        'position': 'left'
      },
      'emphasis': {
        'focus': 'series'
      },
      'data': [-120, -132, -101, -134, -190, -230, -210]
    }
  ]
}


class CustomEchart(pn.reactive.ReactiveHTML):
    object = param.Dict()
    
    _template = """<div id="pn-container" style="height:100%;width:100%"><div id="plot" style="height:100%;width:100%"></div></div>"""
    _scripts = {
        "render": """
if (state.chart != null)
    echarts.dispose(state.chart);

const config = {width: model.width, height: model.height, renderer: model.renderer}
state.chart = echarts.init(plot, null, config);
self.plot()
""",
    "after_layout": """
state.chart.resize()
""", 
    "plot": """
label_formatter = (params) => {return Math.abs(params.data)}
data.object.series[2].label.formatter = label_formatter
state.chart.setOption(data.object)
"""
    }

echart_pane = CustomEchart(object=configuration, height=500, sizing_mode="stretch_width")

template = pn.template.FastListTemplate(
    site="Demo",
    title="",
    main=[pn.Row(echart_pane)]
)

template.servable()
#3

There is a request to support javascript function with the ECharts pane here Support JsCode in ECharts when using dicts or pyecharts objects · Issue #2634 · holoviz/panel (github.com).

#4

Thank you, @Marc - your suggestion worked. To be honest, is a bit strange that for something so little as showing negative as positive, there is so much code behind.

You already answered also to what I wanted to ask next: how to use functions, in a similar way as they are used in ECharts.

Maybe it would be a good idea if this particular example of using functions is added to the panel documentation, perhaps here: ECharts — Panel v0.14.0a11.

Thank you!