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. 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.