Highcharts散点图标记转换错误

Question

I have made a highcharts graph which is intended to mirror the following:

I am using a triangle image as a marker for the graph, but by default, the marker is being situated in the center of the bar. I have tried to use the translation function

  chart.series[1].data.graphic.translate(0, 20);

but this does not seem to be helping. Here is my full code:

barchartFiddle

I was also wondering how I would add the percentage to the top of as it would move along with the bar. Furthermore, I have tried using (multiple versions with different css properties + high zIndex - I will be listing the basic)

chart.renderer.text('blah',50,50).add();

to add the bottom 3 criteria, but for some odd reason, no text shows up. Finally, I was wondering what logic to add in order to change the appearance of the text, depending on the data, to mirror the one shown in the image (Note difference between acceptable and healthy)

Answer 1

In your jsFiddle you have added your callback function in wrong place, when you will add it correctly it should work fine.

function(chart) {
    var marker = chart.series[1].data[0];
    marker.graphic.translate(-20, 0);
}

You can use dataLabels for showing the percent value near your marker.

  dataLabels: {
    enabled: true,
    x: -5,
    y: 10,
    style: {
      fontSize: 20
    },
    formatter: function() {
      return this.y + '%'
    }
  }

Here you can find an example how it can work: http://jsfiddle.net/2TuCW/341/