Highlight Last Value of data series in Y-Axis Label

[lawlessleo]

Hi everyone,


I am trying to get the last value of the chart to appear highlighted on the Y-axis as a tag as displayed in this post:
viewtopic.php?t=37651

Been banging my head at this for a while now but I just can't seem to figure it out, my code is as follows:

Code: Select all

$(function() {
  const drawLabel = function() {
    const chart = this
    const renderer = this.renderer
    const pathStr = 'M0 12 L12 0 L64 0 L64 24 L12 24 Z'
    const path = pathStr.split(' ')
    const colors = Highcharts.getOptions().colors
    console.log(this.series)
    const points = this.series[0].groupedData
    const lastPoint = points[points.length - 1]
    
    // Delete old paths
    //console.log(chart.labelBg, chart.labelTxt)
    !chart.labelBg && (chart.labelBg = renderer.path(path))
    !chart.labelTxt && (chart.labelTxt = renderer.text(lastPoint.high))
    
    // Create new label path
    chart.labelBg
      .attr({ zIndex: 1, fill: colors[2] })
      .translate(570, lastPoint.plotClose + 65)
      .add()
    chart.labelTxt
      .attr({ zIndex: 2 })
      .translate(583, lastPoint.plotClose + 81)
      .add()
  }
  
  const options = {
    chart: {
        backgroundColor: '#1B191B', // Background Color
        type: 'line',
        zoomType: ""
    },
    rangeSelector : {
        enabled: false,
        selected : 2,
        inputEnabled: false
      },

    title: {
      text: 'APPLE INC', // Title of the Chart
      align: 'left',
      style: {
            color: '#dedbde',   // Custom CSS for the title
            fontWeight: 'bold'
        }
    },
    scrollbar: { enabled: false },
    exporting: {
      enabled: false // disables the Menu
    },
    yAxis: {
    lineWidth: 2,
    tickWidth: 1,
    labels: {
                style: {
                    color: '#dedbde' // Color of xAxis Labels
                },
                align: 'right',
                

            },
    offset: -1, // Move yAxis back slight to remove the space between it and the data     
    opposite: true // place y axis on right of the chart. use False for left
  },

  xAxis: {
            labels: {
                style: {
                    color: '#dedbde' // Color of xAxis Labels
                }
            },
            gridLineWidth: 1,            
        },
     navigator: {
        enabled: false // disables the scrolling date at bottom
    },
    series: [{
      name: 'AAPL Stock Price',
      data: [],
      type: 'areaspline',
      threshold: null,
      color: '#5861B3', // plot line Color
      tooltip: {
        valueDecimals: 2
      },
      
      fillColor: {
        linearGradient: {
          x1: 0,
          y1: 0,
          x2: 0,
          y2: 1
        },
        stops: [
          [0, Highcharts.getOptions().colors[0]],
          [1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
        ]
      }
    }]
  }
  const url = 'https://demo-live-data.highcharts.com/aapl-c.json'
  const chart = Highcharts.stockChart('container2', options)
  $.getJSON(url, function(data) {
    chart.series[0].setData(data)
      // Execute callback
    if (chart.options.chart.events && chart.options.chart.events.dataLoad) {
      const dataLoad = chart.options.chart.events.dataLoad.bind(chart)
      dataLoad(data)
    }
  })
})

My chart renders, but i cant get the last value highlight tag to show up, see image below.

Screenshot from 2022-11-30 16-15-47 (1).png (42.44 KiB) Viewed 1100 times

Also, I'm having a slight formatting issue with my Y-Axis labels, these appear to be cut by the Y-Axis vertical line. I have tried using "yAxis.labels.padding", "yAxis.margin", and "yAxis.offset" without success. I would ideally like to make the space for the labels of the Y-Axis wider (even if that means getting a smaller chart area). See image above for reference.


Any help / suggestions/ advice would be very much appreciated. Thanks alot.

[dawid.d]

Hello,

Welcome to our forum and thanks for contacting us with your question!

To move the axis labels horizontally, use the x attribute: https://api.highcharts.com/highcharts/yAxis.labels.x

Your code had some bugs due to wrong assumptions. I corrected it and posted it as a demo below.
If you have any trouble understanding, feel free to ask for help!
Demo: https://jsfiddle.net/BlackLabel/eyxau6c3/

​If you have further inquiries, you may reach out to me at any time.
Best regards!