score:16
Accepted answer
have you tried to use itemwidth parameter?
please take look at
http://jsfiddle.net/b9l2b/1266/
legend: {
width: 200,
itemwidth: 100
},
http://api.highcharts.com/highcharts#legend.itemwidth
edit:
width:600,
itemwidth:300,
itemstyle: {
width:280
}
score:0
maybe you could use the "labelformater" of the legend.
http://api.highcharts.com/highcharts#legend.labelformatter
then you could create a table and arrange the legend text as you wnat.
have a look at the example on the documentation page.
score:1
function renderelements() {
if (this.legend) {
this.legend.destroy();
}
//distance between 2 elements
let itemdistance = this.legend.options.itemdistance;
//the biggest element
let maxitemwidth = this.legend.maxitemwidth;
//make the width of the legend in the size of 2 largest elements +
//distance
let nextlegendwidth = (maxitemwidth * 2) + itemdistance;
//container width
let boxwidth = this.plotbox.width;
//if the length of the 2 largest elements + the distance between them
//is less than the width of container, we make 1 row, else
//set legend width 2 max elements + distance between
if (boxwidth < nextlegendwidth) {
this.legend.options.width = maxitemwidth;
} else {
this.legend.options.width = nextlegendwidth;
}
this.render()
}
chart: {
events: {
load: renderelements,
redraw: renderelements
}
}
Source: stackoverflow.com
Related Query
- Display legend items in two columns highcharts
- Highcharts - Display legend for Pie chart in two columns
- HighCharts - Single legend for two columns in a Stack Column chart
- Break highcharts legend items into two lines
- Two columns with two legend items in highchars.js
- How can I display legend in two columns in pie chart
- Always display data labels above columns in HighCharts
- Highcharts - How to programmatically toggle legend items and determine which items are selected
- Highcharts - How to display legend symbol inside the tooltip
- Turn long list of items in Highcharts legend into dropdown
- Highcharts putting extra space among legend items
- Two pies, one legend with unique items (merge legends)
- highcharts legend items align to the left when width is set
- how to display 2 same highcharts without duplicate the code
- Trouble when Highcharts display many columns
- Jquery Highcharts Legend items sorting
- How to suppress items with NULL value from HighCharts legend
- Change Highcharts Legend Display After Render
- Display custom tooltip on highcharts legend
- Button to show all legend items in highcharts
- Highcharts display label for pie chart using html table as data source
- Highcharts not showing value when two stacked columns have value = 1
- Highcharts How to display total of data classes in legend
- Highcharts Pie Chart: How to ignore disabled legend items
- Highcharts pie chart legend items showing gradient colors
- To display legend of the chart outside the canvas of the chart in highcharts
- highcharts stacked columns and spline messed up yAxis display
- How to use highcharts bubble to display more than 3 columns data?
- highcharts with scrollbar, how to display all items on download image?
- Highcharts : Put data labels legend inside columns
More Query from same tag
- Highcharts show max., min., and average for each serie in legend
- Export Highcharts data in excel with values as a string
- Produce highcharts multiple line chart from JSON / MySQL data
- how to update renderer.text() in highcharts after a graph has been drawn?
- pop up using htmlExpand not working in highcharts
- Highcharts not formatting tooltip datetime according to xDateFormat setting
- How to get current date and time on highcharts
- Area charts in Highcharts: min and minPadding for y-axis
- Highchart data labels appear in middle if xAxis ticks
- How to fill the blank space between the bars with specific color in gantt chart of highcharts?
- Remove DataPoint from x-axis redraw Issues
- How to get PlotBands data to show up on HighChart chart?
- how to access function in Json
- HighCharts gantt treegrid collapse details
- Resize Highcharts StockChart range selector to lessthan 6 data points
- Is possible add minHeight or make column fit with text inside columnrange on Highcharts?
- Showing/Hiding child nodes and links in Highcharts Networkgraph
- Highcharts large treemap How do I get the clicked node data?
- Highcharts remove column defined by keys from export to CSV
- How can I display legend in two columns in pie chart
- Connecting NULL points in Highstock charts
- Allowing some padding space in polar charts using Highcharts
- Highmaps - Choropleth maps - All area are the same color
- Use different object property names for x and y axes
- fix height of column in stacked percentage column highcharts
- Set HighCharts marginTop dynamically based on mobile device screen size
- How to show the transition in highchart series graph without refreshing the html webpage?
- x-axis minimum value to 2 and tickinterval of 6 months using highcharts
- Bar chart with wrong bar height
- I want to show a 0% data without a column in stackbar chart in android using highchart