score:1
Accepted answer
I found a way how to achieve it. Check the below code which shows how to find the unique x positions for each group and use the renderer tool to render a custom text:
events: {
load() {
const chart = this;
const y = chart.plotTop + chart.title.alignAttr.y;
chart.renderer.text(
'Round',
10, //fixed left-margin
y
).attr({
zIndex: 5
}).add()
setTimeout(function() {
const xPositions = [...new Set(chart.series[0].nodes.map(node => node.prevX))]
xPositions.forEach((x, i) => {
chart.renderer.text(
i + 1,
x + chart.plotLeft,
y
).add()
})
}, 10)
}
}
Demo: https://jsfiddle.net/BlackLabel/u02hvz1a/
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
Source: stackoverflow.com
Related Query
- Add textbox to chart and draw strings
- How do you add text to the bottom center of legend and bottom center of chart under legend?
- How to add space between chart and axis in highcharts
- How to use add series and update methods in the high chart wrapper for angular?
- How to dynamically add point placement and point padding in fixed column chart (highcharts)
- How to draw a bar chart that one series has both positive and negative values in Highcharts?
- Highcharts: how to draw line segments with click-and-drag and without chart to scroll?
- Wanted to plot only one spline at the chart load and further add other splines after loading
- "Extend" highcharts chart add properties and functions, prototype
- Detect a click on, and add hover/selected style for x axis on area chart in Highcharts?
- HighCharts Line Chart draw y axis line for entire line points and only one line
- FusionCharts Failed to draw different chart on same data source
- How to change the series color and mark after I draw the line chart in highcharts?Does it has databound event?
- How I can Add Start and end point in stacked bar chart in chart js?
- Highcharts.js question: is it possible to add blank space from the left and right side of chart that will be visible only during panning?
- I want to add a loading spinner or add some dialog until highcharts get loaded and should close after chart is loaded in react typescript?
- how to draw hour and minute value (hh:mm) pie chart using highcharts,javascript
- Set chart options when printing and add a footer
- Highstock - How to add point if I have different data on main chart and navigator
- How to draw a chart from one array of data and make labels on the chart from another array of data? Highcharts v.4.0.4
- Dynamic add series and categories for highchart drill down chart
- How to create a column range chart in Highcharts using range and navigator functions?
- How to use the tooltip formatter and still display chart color (like it does by default)?
- Remove Export and print button plugin on highchart chart
- JavaScript - Export Div with SVG chart + HTML as and Image
- Highcharts: Remove space between plot border and actual chart
- Highcharts - labels inside and outside a pie chart
- Highcharts saying undefined is not a function when trying to add a new chart
- Highcharts / jQuery - destroy and rebuild chart with original options
- How do you increase the performance of highcharts chart creation and rendering
More Query from same tag
- Monthly data in highcharts without explicitly providing all month label
- Highcharts - Series data from MySQL in the expected format
- how to dynamically change array in highchart?
- React Use Function In Javascript Object
- Why are the xAxis labels in my Highcharts graphic so strangely positioned?
- Make highcharts bar-chart threshold line visible & labels not to overlap on one another
- Highcharts Isomorphic rendering / web-workers
- How to update the theme of highchart
- Highcharts JS remove tips & squared legends for linear chart
- On HighMaps, how do I show state abbreviations instead of state name on a U.S. map and remove data label from point
- Images on Highchart
- Application crashing when clicking on Highcharts data export menu
- HighChart : update group column chart
- Load mysql data to Highcharts line chart using JSON
- Highchart Renderer By min and max
- High Chart to Image
- how to display 2 same highcharts without duplicate the code
- Click event outside series
- Treemap in highcharts display series name and value in treemap only
- How to return series/point data from mouseover event?
- Highcharts click event should apply only on marker point
- highcharts displaying data on timechange
- Highcharts - How to populate date with Mysql and PHP?
- Getting weird error message from Highstock / Highcharts
- High Chart X Axis to display month and year
- Highcharts, highslide and ReportViewer
- How to change the colour of inactive bars in Highcharts?
- Highcharts - how to display a chart with stacked and un-stacked columns side-by-side
- Highcharts yaxis higher values displayed lower
- Pass data to Javascript from ProMotion WebScreen