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 css styles when exporting
- response with status 200: ok
- What is the format of 'date' when for highchart?
- Highcharts- Javascript- How to show cumulative count of all the series of legend by default, and linked series inside a legend
- Highcharts heatmap - disabling the legend results in different colors
- How to return json data in HighCharts?
- Set Specific Range on X-Axis in HighCharts
- softMin/softMax for xAxis in HighStock doesnt set?
- Highchart - Dual Axes Line chart issue
- Prolems with highcharts
- How can you combine multiple graphs and control with one range selector with Highcharts?
- How to set series-label to false by default and change the color of series label text in highchart
- Non-contiguous time series in Highcharts
- Highcharts | Line height control for plot band labels in styled mode
- Find chart by title (Highcharts)
- Highcharts : Set an y offset to the series
- Highcharts 7.0.3 with Xpages/dojo
- R Shiny - Highcharts: Tooltip delay before display
- How to export Highcharts with CMYK colors?
- Applying 'categories' to Y-Axis causes a gap between column start and X Axis in Highcharts?
- External JSON from API into array?
- Parsing Json to render multiline highstock charts using Javascript
- Highchart Treemap with Multiple series and should behave live heat map
- Highcharts: Format series names in tooltip
- Highcharts, Show specific tick on a datetime xaxis type
- Hightcharts present values by date from database
- Create Pie chart for each Json object
- Formatting data in correct format for HighCharts mvc asp.net
- Highcharts throwing container not found error but the container exists
- Highcharts-react not rendering on initial page load