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 - Local export server installation issue (Tomcat Java)
- High Charts not working
- ES6 avoid that/self
- Highcharts column only show one category
- Does Highstocks.js covers Highchart.js's features?
- Highcharts - set maximum range for yAxis but keep axis dynamic within that range
- Highcharts stacked column bar with line
- Highstock: When legend under the chart has many items, the chart height is small. How can I fix the height?
- Highcharts plot band to last datetime value from spreadsheet data
- How to add our own graph to Kibana?
- How i can get the 2 decimal places?
- How do I remove some attributes of an element using selection by querySelectorAll?
- Rails App Plotting Zeros in Highchart Graph via Lazy_High_Charts Gem
- Gradient background bars in Highchart bar chart
- How to use tickPositioner, to have different distance between lines of grid (Yaxis)?
- remove inline styles from svg in highcharts
- JSF+HighCharts Integration Issue
- HighCharts not showing anything
- How to remove cirlce,line,square symbol from highchart
- How to set xaxis label according my json result data?
- Add more charts in angular highcharts
- highstock chart move selection on keybord arrow key press
- Highcharts Dynamic Drilldown using json
- highcharts column stack label
- Highcharts has missing markers at the top for very specific heights
- Highcharts 7 - Center an Annotation
- Finding parent of highcharts button w/ jquery
- Highcharts - Zoom to secounds?
- HighCharts Boxplot side by side Xaxis
- Array split with the help of object categories values of array- Javascript - High Chart