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 place(Inside the white circles at the top)

This is what I have achieved so far

Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });
        /*function updateData(x,y)
        {
            var series = chart.series[0];
            series.addPoint([x, y], true, true);
        }*/
var chart;

$(function () {
    var color = '#AA34FF';

    $('#container').highcharts({
        chart: {
            events: {
                load: function(event) {
                    _bindCustomEvents();
                }
            },
            backgroundColor: 'transparent'        
        },

        series: [
            {
                color: 
                {
                    linearGradient: 
                    {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops: 
                    [
                        /*[0, '#a83e3e'],
                                [0.21, '#d34e47'],
                                [0.40, '#edbb5a'],
                                [0.57, '#e2e57a'],
                                [0.76, '#8dcc63'],
                                [1, '#7ab237']*/
                                [0, '#7ab237'],
                                [0.21, '#8dcc63'],
                                [0.40, '#e2e57a'],
                                [0.57, '#edbb5a'],
                                [0.76, '#d34e47'],
                                [1, '#a83e3e']
                            ]
                        },
                        lineWidth: 4,
                        marker: {
                            enabled: false,
                            fillColor: '#FFFFFF',
                            lineWidth: 2,
                            lineColor: null,
                        },
                        type: 'spline',
                        data: [1, 2, 5, 3, 6, 7, 4],
                        backgroundColor: 'transparent',
                        plotShadow : false
                    },
                    {
                        name: '',
                        marker: {
                            symbol: 'diamond'
                        },
                        //same inmage for all points
                        marker: {
                            symbol: 'url(http://fc08.deviantart.net/fs71/f/2014/016/b/9/top_marker_by_skyrbe-d72ewk0.png)'
                        },
                        data: [8,8,8,8,8,8,8],
                        type:'scatter'
                    },
                    {
                        name: '',
                        marker: {
                            symbol: 'diamond'
                        },
                        //same inmage for all points
                        marker: {
                            symbol: 'url(http://fc03.deviantart.net/fs71/f/2014/016/f/a/bottom_marker_by_skyrbe-d72ew7w.png)'
                        },
                        data: [-1,-1,-1,-1,-1,-1,-1],
                        type:'scatter'
                    }
                ],
                xAxis: {
                    categories: [
                        'Sun',
                        'Mon',
                        'Tue',
                        'Wed',
                        'Thu',
                        'Fri',
                        'Sat'
                    ],
                    title: {
                        enabled: true,
                        text: null,
                    },
                    labels: {
                        style: {
                            fontFamily: 'gestaregular',
                            fontSize: '16px',
                            color:'#fff'
                        }
                    },
                    plotLines: [
                        { // mark the weekend
                            color: 'rgba(255,255,255,0.3)',
                            width: 1,
                            value: 0,
                            dashStyle: 'dash',
                            zIndex:10
                        },
                        {
                            color: 'rgba(255,255,255,0.3)',
                            width: 1,
                            value: 1,
                            dashStyle: 'dash',
                            zIndex:10
                        },
                        {
                            color: 'rgba(255,255,255,0.3)',
                            width: 1,
                            value: 2,
                            dashStyle: 'dash',
                            zIndex:10
                        },
                        {
                            color: 'rgba(255,255,255,0.3)',
                            width: 1,
                            value: 3,
                            dashStyle: 'dash',
                            zIndex:10
                        },
                        {
                            color: 'rgba(255,255,255,0.3)',
                            width: 1,
                            value: 4,
                            dashStyle: 'dash',
                            zIndex:10
                        },
                        {
                            color: 'rgba(255,255,255,0.3)',
                            width: 1,
                            value: 5,
                            dashStyle: 'dash',
                            zIndex:10
                        },
                        {
                            color: 'rgba(255,255,255,0.3)',
                            width: 1,
                            value: 6,
                            dashStyle: 'dash',
                            zIndex:10
                        }],
                    lineWidth: 0,
                    minorGridLineWidth: 0,
                    lineColor: 'transparent',
                },
                yAxis: {
                    labels: {
                        enabled: false
                    },
                    title: {
                        enabled: true,
                        text: null,
                    }
                },
                legend: {
                    enabled: false  
                },
                minorTickLength: 0,
                tickLength: 0

            });

        });

function _bindCustomEvents()
{
    var chart = $('#container').highcharts();
    chart.setTitle({ text: ''});
    $('.highcharts-axis').hide();
    $('.highcharts-grid').hide();
    $('.highcharts-axis').find('path').hide();
}

FIDDLE LINK

This is how I want it to look like : Instead of '2' in the top circles , it should be the corresponding value from the center spline [1, 2, 5, 3, 6, 7, 4]

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.