Search code examples
highchartspositionmarker

highcharts lollipop/dumbbell chart change position/colour of positive and negative marker values


I am trying to create a lollipop chart where some values are negative, and some are positive, either side of zero, like this:

image

However the chart seemingly only allows the marker to be on the "high" end of the chart. Is there a way to control which end has the marker ?

I'm using these chart options:

chartOptions: {
        chart: {
          type: 'dumbbell',
          inverted: true
        },
        title: {
          text: 'lollipop chart'
        },
        xAxis: {
            type: 'category'
        },
        yAxis: {
            title: {
            text: 'value'
            }
        },
        series: [{
          name: 'value',
          data: [{
              name: 'a',
              low:0,
              high:13,
          }, {
              name: 'b',
              low:0,
              high:26,
          },{
              name: 'c',
              low:-43,
              high:0
          },{
              name: 'd',
              low:-83,
              high:0
          },{
              name: 'e',
              low:0,
              high:113
          }]
        }]

      }

Solution

  • The series which should be used in this case is a lollipop, but it seems that the array of objects configuration doesn't work. I reported it on the Highcharts Github issue channel, where you can follow this thread: https://github.com/highcharts/highcharts/issues/13202

    As a solution in the dumbell series I suggest to find those graphics in the render callback and hide them.

    Demo: https://jsfiddle.net/BlackLabel/3o7acsbt/

      events: {
        render() {
            let chart = this;
    
          chart.series[0].points.forEach(p => {
            if (p.low >= 0){
              p.lowerGraphic.hide()
            } else {
                p.upperGraphic.hide()
            }
          })
        }
      }
    

    API: https://api.highcharts.com/highcharts/chart.events.render

    EDIT

    Under the GitHub link, the workaround showed up. Please check it, maybe will be fit better to your requirement.