title: Custom HighCharts - change the height of plotLines , show the marker value by default at a specific x and y
body: <p>I am trying to customize highcharts</p>
  
  <p>1) I need to change the height of the plotlines</p>
  
  <p>2) Show the marker value inside the marker image itself at a specific place(Inside the white circles at the top)</p>
  
  <p>This is what I have achieved so far</p>
  
  <pre><code>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();
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/skyrbe/fL7kM/2/" rel="nofollow noreferrer"><strong>FIDDLE LINK</strong></a></p>
  
  <p>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]</p>
  
  <p><img src="https://i.stack.imgur.com/YypNb.png" alt="Image"></p>