Highcharts customized chart

Question

I'm using Highcharts to develop a customized chart. Here is what I've gotten by my own jsfiddle. Here is my code:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'area',
            inverted: true,
            height: 700,
            width: 780,
            marginRight: 20
        },
        credits: {
            enabled: false
        },
        colors: [
            '#828385',
            '#3AAFC1',
            '#F87D2A',
            '#80699B',
            '#3D96AE',
            '#DB843D',
            '#92A8CD',
            '#A47D7C',
            '#B5CA92'],
        exporting: {
            enabled: false
        },
        title: {
            text: ' '
        },
        subtitle: {
            style: {
                position: 'absolute',
                right: '0px',
                bottom: '10px'
            }
        },
        legend: {
            itemDistance: 30,
            x: 180,
            verticalAlign: 'top'
        },
        xAxis: {
            categories: ["Label1", "Label2", "Label3", "Label4", "Label5", "Label6", "Label7", "Label8", "Label9", "Label10"],
            offset: -410,
            labels: {
                overflow: 'justify'
            },
            plotLines: [{
                color: '#A0A0A0',
                width: 1,
                value: 0

            }, {
                color: '#A0A0A0',
                width: 1,
                value: 1

            }, {
                color: '#A0A0A0',
                width: 1,
                value: 2

            }, {
                color: '#A0A0A0',
                width: 1,
                value: 3

            }, {
                color: '#A0A0A0',
                width: 1,
                value: 4

            }, {
                color: '#A0A0A0',
                width: 1,
                value: 5

            }, {
                color: '#A0A0A0',
                width: 1,
                value: 5

            }, {
                color: '#A0A0A0',
                width: 1,
                value: 6

            }, {
                color: '#A0A0A0',
                width: 1,
                value: 7

            }, {
                color: '#A0A0A0',
                width: 1,
                value: 8

            }, {
                color: '#A0A0A0',
                width: 1,
                value: 9

            }]
        },
        yAxis: {
            title: {
                text: 'Índice teste'
            },
            max: 100,
            min: 0,
        },
        plotOptions: {
            area: {
                fillOpacity: 0.5
            },
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function () {
                            if (jQuery('#type_group_name_hidden').val() == 'Processo') {
                                jQuery('#type_group_name_hidden').val('Atividade');
                            } else if (jQuery('#type_group_name_hidden').val() == 'Atividade') {
                                jQuery('#type_group_name_hidden').val('Procedimento');
                            } else if (jQuery('#type_group_name_hidden').val() == 'Procedimento') {
                                jQuery('#type_group_name_hidden').val('Processo');
                            }
                            jQuery('#group_name_hidden').val(this.category);
                            requestAjaxChart('processos', buildProcessos);
                        }
                    }
                },
                marker: {
                    lineWidth: 1
                },
                threshold: 50
            }
        },
        series: [{
            name: "Market",
            data: [46.503590664272934, 51.39078282828278, 56.89226932668327, 47.66801075268824, 46.82561768530563, 59.23058676654176, 51.08220338983055, 46.17849829351536, 55.84550063371354, 51.428756058158314]
        }, {
            name: "My network",
            data: [48.175, 27.159999999999997, 39.916666666666664, 38.6, 53.85, 38.949999999999996, 30.4, 51.9, 33.519999999999996, 54.7875]
        }, {
            name: "Avg",
            data: [70, 80, 65, 75, 85, 82, 72, 69, 71, 58]
        }]
    });
});

Even it looks pretty good, it's not exactly what the client desire. I need to do some changes as described bellow:

1. Remove all the vertical lines on xAxis. As my chart is a inverted one, I couldn't figure out how to remove them.
2. On the xAxis values (0 - 100), remove the intermediaries values (10, 20, 30, ...) keeping just the first and last value (0, 100)
3. Move the yAxis labels upon the horizontal lines
4. Make clickable the points behind the overflowed chart area

I've tried almost all configuration options but with no success.

Any suggestion?

Answer 1

Some answers :

1) See from docs gridlineWidth property.

2) See from docs tickPositions property.

3) Another docs labels.y property.

4) Not possible, even if it's SVG/VML it still is HTML, you can't make clickable DIV which is positioned behind another one.