score:1
Accepted answer
You can use the flag series from Highstock. The below example contains also anti-collision logic for the flags.
Highcharts.chart('container', {
chart: {
...,
events: {
render: function() {
const points = this.series[0].points;
points.forEach(function(point, i) {
if (points[i + 1] && point.plotX + point.graphic.width > points[i + 1].plotX) {
const translateY = point.graphic.translateY - point.graphic.height - 10;
points[i + 1].graphic.attr({
anchorX: points[i + 1].plotX,
anchorY: point.graphic.anchorY + point.graphic.height + 10,
translateY: translateY
});
}
});
}
}
},
series: [{
type: 'flags',
fillColor: null,
showInLegend: false,
colorByPoint: true,
allowOverlapX: true,
stackDistance: false,
data: [{
x: 1.7,
title: '1.7'
}, {
x: 1.8,
title: '1.8'
}, {
x: 2.1,
title: '2.1'
}, {
x: 2.5,
title: '2.5'
}, {
x: 2.5,
title: '2.5'
}],
shape: 'flag'
}]
});
Live demo: https://jsfiddle.net/BlackLabel/eg0oxr4t/
Source: stackoverflow.com
Related Query
- Scale graph in angular
- How to populate a Highchart graph with Angular
- Strange character in the Highstock source code
- Highcharts: yAxis.height does not scale drawable area, causing graph to go off the chart
- Angular - Errors when filling a Highcharts network graph with an array
- show tooltip for each point of highcharts network graph in Angular
- How to create a drilleable bar graph in jsp page using open source charts API
- Graph not rendering series correctly using angular 4
- How can I align the scale on my HighCharts graph with the axis rather than the margins?
- HighCharts Bubble graph JSON as data source
- How to modify the code so that Highcharts graph does not cover fixed navigation bar at the top of the page?
- Highchart spline Cut Off when reach to maximum scale value. How can it fixed?. I have attached may sample code on body
- Exiting full screen does not re-render graph to same size in highcharts exporting at angular 7
- The graph is not equal on the basis of the addition code in Highcharts
- Rendering Highcharts using Angular js Directives
- Highchart specific width stack column bar graph
- Disable-Click on Legend in HighCharts Column Graph
- High charts remove dots from the line graph
- How to use highcharts with angular 5?
- How to get rid of Function calls are not supported in decorators in Angular aot compiling?
- missing value in highcharts line graph results in no line, just points
- Highcharts: Line graph with half solid line and half dotted line?
- Scrolling over highcharts graph
- Getting error while using highcharts in Angular 7
- How to make stacked column graph to show total data value on top
- drawing custom lines on highchart graph
- How to hyperlink bar graph in highcharts
- Highcharts - Dyanmic graph with no initial data
- Highstocks graph width not correctly rendered
- Highcharts graph X-axis label for different date ranges
More Query from same tag
- Highcharts dynamic binding in c# or json
- Erro in ReactJS - Module not found: Can't resolve 'highcharts'
- Highcharts column drilldown
- how to divide two columns on series with json in highchart
- HighCharts - Show dataLabel for last value in stockChart
- giving a local json file for line chart
- JIRA Gadget Plugin with HighCharts
- How do I access series.data anywhere in .highcharts() function?
- Highcharts: options setting for customized renderer
- Hide or disable navigator handles in highcharts
- Highcharts stock chart not showing up with custom data
- Highcharts point click event returns "hover" state instead of "select" state
- Render Highcharts after user updated labels
- highchart Customclass css not applied to tooltip for dumbbell series
- How to remove white background on a simple bar chart?
- highchart sunburst percentage which is not relative percentage but depend on other attributes
- How to center chart title position dynamically inside pie chart in highcharts
- How to set tooltip to highcharts legends?
- Angularjs scope lost when creating highcharts click function
- Highcharts - Get crossing point of crossing series
- highcharts in new window with ajax and jquery
- Highcharts -- Array not assigned without alert message
- Highcharts dashed line on x axis not going all the way across
- Dynamic update multible series Highcharts with single point XML file
- Highcharts - xAxis label for each point
- Multiple columns on same series. Highchart
- How to show overlapping in various columns of highcharts column range graph
- Highcharts function not covered with unit tests with Karma + Jasmine
- High charts AddAnnotation is not a function for dynamic adding
- Highcharts 24 hour clock