score:0
highcharts doesn't support that kind of layout manipulation on legend by default.
the solution here could be extending the highcharts core so that it supports 2 legends or more.
example for 2 legends:
(function(h) {
var merge = h.merge;
h.wrap(h.legend.prototype, 'getallitems', function() {
var allitems = [],
chart = this.chart,
options = this.options,
legendid = options.legendid;
h.each(chart.series, function(series) {
if (series) {
var seriesoptions = series.options;
// use points or series for the legend item depending on legendtype
if (!isnan(legendid) && (seriesoptions.legendid === legendid)) {
allitems = allitems.concat(
series.legenditems ||
(seriesoptions.legendtype === 'point' ?
series.data :
series)
);
}
}
});
return allitems;
});
h.wrap(h.chart.prototype, 'render', function(p) {
var chart = this,
chartoptions = chart.options;
chart.toplegend = new h.legend(chart, merge(chartoptions.legend, chartoptions.toplegend, {
legendid: 0
}));
chart.bottomlegend = new h.legend(chart, merge(chartoptions.legend, chartoptions.bottomlegend, {
legendid: 1
}));
p.call(this);
});
h.wrap(h.chart.prototype, 'redraw', function(p, r, a) {
var chart = this;
p.call(chart, r, a);
chart.leftlegend.render();
chart.rightlegend.render();
});
h.wrap(h.legend.prototype, 'positionitem', function(p, item) {
p.call(this, item);
});
})(highcharts);
live demo: http://jsfiddle.net/blacklabel/6ob2qs1c/
legends can be positioned via their x
& y
properties. chart.marginbottom
creates some space for the legends.
score:1
i've achieved layouts like this by setting the legend itemwidth and width:
legend: {
enabled: true,
itemwidth: 200,
width:400,
align: 'center'
},
Source: stackoverflow.com
Related Query
- Legend: break line so the following legends start from the next line
- Is it possible to hide the line & symbol next to Highcharts legend items?
- In the following code i want to show the WHOLE names on x axis nd dont want them to overlap with the legend
- HighCharts Hide Series Name from the Legend
- High charts remove dots from the line graph
- How do I remove the color swatch from my HighCharts legend without affecting the column?
- Highchart how to animate from the xaxis bottom line upward
- c# WPF Webbrowser with Highchart, Javascript from external source not working "An error has occurred in the script on this page"
- In a Highchart, how to display the legend text in next row if the text is too long?
- Remove line dots from the area spline chart
- Hide or Disable Legend or Label in the end Highcharts line
- Stop Highcharts from cropping the series line between points on the x-axis
- How do I use dates from a LinkedHashMap for the x-axis on a Highcharts line graph (using Thymeleaf)?
- How to make the Y Axis values not start from 0 in highcharts? How to display forcefully display the last category data on X axis in HighCharts ?
- Disable line from tooltip to point location on the chart
- How to add a line break in Highchart legend in R?
- Highcharts - How do I keep both line points in from splitting between the two bar charts
- how to add values from a database output to the data field in Line Chart of Chart.js
- Strange character in the Highstock source code
- Remove the strikethrough on legend symbols for line charts?
- On Mouse over on the high chart data the tool tip value should be displayed next to legend label
- When adding point on dynamically created Multiple Highchart Graphs on a single page, the plot line draws to the start point instead of last point?
- Cannot display a legend with special character in highchart from the serie name
- Highcharts - How to prevent long title with line break from overflowing subtitle
- Highstocks: Disable the Vertical line while hovering on legend or chart
- Graphics start from axis + grid line
- HighChart 'tooltip' object is not found on the very next line in IE8
- highstock selected rangeSelector is computed from the current end date in the slider and not from the start date
- Create Highchart from the Following Data
- HighCharts Disable some Series Name from the Legend
More Query from same tag
- How to use jspdf to print and download the multiple highcharts contents in pdf format
- How to correct mouse event in Highcharts
- Performing styling action on specific data in a highcharts graph
- Scatter tooltip of highchart is not being displaying
- Highcharts: How to draw a line on top of a column?
- Fast switching of many graphs in highchart
- onclick popout highchart piechart
- highstock: space between opposite x-axis and range-selector/datepicker
- HighCharts Angular - data from API not showing in chart
- Highcharts: dynamically change the tooltip formatter?
- Highcharts : display a second series under the X-Axis
- Disable-Click on Legend in HighCharts Column Graph
- HighChart: Show custom label on series (spline)
- How to POST Highcharts Image?
- How to change chart height in hchart() function in R (highcharter package) without using pipe operator?
- Dynamically adding to Highcharts
- How to properly set datetime as x-axis value on Highcharts(React JS)
- Highcharts - Change line color between points
- How to change space value between grid and yAxis in Highcharts line chart
- Is there a way to add a click event to open a url in a highcharter plot without shiny?
- High charts using candlestick,vloum and MACD
- Highcharts highstock update date filter with javascript
- Highcharts parsed drilldown not showing on page but does in console
- highcharts always console error ablout bubble_compiled.js?
- How to Display Month and Year in xAxis of Highcharts datetime graph
- send javascript function in PHP to be formatted as JSON (highcharts)
- How to remove the stroke around the single points in a highcharts area. Highcharts
- Add Y axis to highchart dynamically at bottom of the 1st chart without reducing the size of the previous chart
- Highcharts Navigator with a table?
- Highcharts Plot Reciprocal Values For Column Height