score:2
It feels more like a hack than a genuine solution, but I have come up with a workaround that solves my issue for now, I have the function below:
var labelBackground = null;
function labelDrawBack(crt) {
if ( isIntraDay ) {
var textbox = crt.yAxis[ 0 ].plotLinesAndBands[ 0 ].label;
if ( !!labelBackground ) {
labelBackground.attr({ y: textbox.y - 10 });
} else {
var box = textbox.getBBox();
labelBackground = crt.renderer.rect( box.x - 3, box.y + 1, box.width + 6, box.height, 3 ).attr( {
fill: '#fff',
id: 'labelBack',
opacity: .65,
'stroke-width': 0,
zIndex: 4
}).add();
}
}
}
I make sure this function is executed immediately after the chart is initialized and additionally I attach the function to the chart object that is returned from the StockChart call:
var chartObj = new Highcharts.StockChart( chartConfig, function ( crt ) {
labelDrawBack( crt );
} );
chartObj.labelDraw = labelDrawBack;
And in the chart options I have added this to the chart.redraw event:
events: {
redraw: function() {
this.labelDraw(this);
}
}
This works as intended, moving the transparent background with the label (which is moved vertically when the chart is resized). The reason I have redirected the call in the chart redraw event is that the labelDrawBack function is defined in another function than the one where my chart options are defined, thus the labelDrawBack function is out of scope there.
Source: stackoverflow.com
Related Articles
- How to draw a background behind a plotLine label in a highstock chart
- Set background color for only one pane in multi-pane Highstock chart
- Spiderweb chart with circular gridline interpolation: Label is seen very far away from Plotline
- Highcharts display label for pie chart using html table as data source
- Highstock chart x-axis label overlap issue
- Draw something under highstock chart navigator
- Strange character in the Highstock source code
- Highstock - Draw Line on yAxis in front of the chart
- Change HighStock chart label on changing rangeselector button
- FusionCharts Failed to draw different chart on same data source
- Highstock chart - issue with xaxis label
- How to set the background of clicked or selected label on y axis gantt chart Highcharts?
- Is there any way to draw a pie chart using highstock latest version?
- Set a custom rangeSelector and disable xAxis label on chart and on Navigator with Highstock
- how can I move yAxis labels from Right of chart to left of chart in highstock
- How to create a new Highstock chart with new Highchart and not jquery?
- Displaying multiple series in the navigator of an HighStock chart
- Dealing with pie chart label overlap [Highcharts]
- How to add a plotline to a bar chart in Highcharts?
- In high chart how to add event for label click
- Highcharts: how to set legend label name after chart created?
- x-axis tickInterval not working correctly in highstock chart
- Highcharts Pie Chart Label Threshold
- How to change axis label size when exporting in Highcharts / Highstock
- Show value of last point as label or tooltip on Highcharts Stock Chart
- Make Highcharts border color match background color on column chart
- Show gridLines when the chart is empty(no series) in highstock
- How to set default range selected on chart draw in Highcharts/Highstock
- How to extract the data from highstock chart
- How to control HightChart Pie Chart/Donut Chart label font-weight in config
- Creating a pie highchart from Data in local (OBJECT) JSON file
- 'Round' gradient on highcharts stacked column to appear as a cylinder
- How to place ranking like top 10 and put x axis labels on right of horizontal bar chart?
- set different colors for each column in highcharts
- How to get rid of Function calls are not supported in decorators in Angular aot compiling?
- highstock series.stochastic "k d" in different colors
- Legend order for proximate layout
- PHP - getting real time data from the database
- Highcharts in Angular - accessing the API
- how to change my pie chart color according to the value
- highcharts - make one column dynamic average?
- How can I dynamically enable/disable series tooltip based on point condition
- Highcharts Highstock How do I change the label on top of tooltip for OHLC series data?
- Highcharts - making a point clickable?
- remove tooltip space between border and content highcharts
- How can I style highchart select to look like hover?
- Highchart changes chart width when user hides the graph lines
- HighCharts not being displayed in Partial view
- Ordering the stacking in a highcharts bar chart in R
- How to make label in highcharts area graph display absolute values instead of negative values?