Custom HighCharts - change the height of plotLines , show the marker value by default at a specific x and y

Question

I am trying to customize highcharts

1) I need to change the height of the plotlines

2) Show the marker value inside the marker image itself at a specific pla

Answer 1

1) The plotLines are infinite. The extend as far as the plot area is. So, to limit this, how about you change your yAxis max:

yAxis: {
    max: 8,
    labels: {
        enabled: false
    },
    title: {
        enabled: true,
        text: null
    }
},

Or, you could create a column series on the points you want and give them a certain value for the height you want. Making the columns thin to mimic your plotLines will help like so:

series: [{
            name: '',
            type: 'column',
            pointWidth: 1,
            borderWidth: 0,
            data: [8, 8, 8, 8, 8, 8, 8]
        },
...

2) Which values in the circles (I am guessing)? The "Series 1: XX"? Or the whole tooltip?

EDIT: For question 2 you can do this with a formatter function on the dataLabel for the scatter series (your circles). Here is the function:

var customFormatPoint = function (pointX, seriesIndex) {
    var theChart = $('#container').highcharts();
    var yValue = null;
    var points = theChart.series[seriesIndex].options.data[pointX];
    return points;
};

You call this from:

series: [{
    name: '',
    type: 'column',
    pointWidth: 1,
    borderWidth: 0,
    dataLabels: {
        enabled: true,
        formatter: function () {
            return customFormatPoint(this.point.x, 1);
        }
    },
    data: [7.70, 7.70, 7.70, 7.70, 7.70, 7.70, 7.70]
}, {...

Key element here is that you have this.point.x which is that scatter point's xAxis location. You then need to send in which index the series is that contains the y value you want to show in the dataLabel.

I have also removed the plotLines and created a series that just contains the bars with width of 1 and no border. I had to mess around to get the end of the bar (its max value) to coincide with the scatter circle diameter.

Please see this jsFiddle.