score:1
Accepted answer
it cannot be done just by using highcharts constructor options. you can achieve that kind of look and behavior by wrapping some core functions:
(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.firstlegend = new h.legend(chart, merge(chartoptions.legend, chartoptions.firstlegend, {
legendid: 0
}));
chart.secondlegend = new h.legend(chart, merge(chartoptions.legend, chartoptions.secondlegend, {
legendid: 1
}));
p.call(this);
});
h.wrap(h.chart.prototype, 'redraw', function(p, r, a) {
var chart = this;
p.call(chart, r, a);
chart.firstlegend.render();
chart.secondlegend.render();
});
h.wrap(h.legend.prototype, 'positionitem', function(p, item) {
p.call(this, item);
});
})(highcharts);
highcharts options:
highcharts.chart('container', {
chart: {
marginright: 350 // create some space for the legend
},
legend: {
verticalalign: 'middle',
width: 300,
align: 'right'
},
firstlegend: {
y: -25
},
secondlegend: {
y: 25
},
series: [{
data: [5, 6, 7],
legendid: 0,
}, {
data: [2, 3, 1],
legendid: 0,
},
(...)
{
data: [1, 8, 2],
legendid: 1
}, {
data: [3, 2],
legendid: 1
},
(...)
]
});
live demo: http://jsfiddle.net/kkulig/r70fwasr/
this code can be optimized so that it works for more than 2 legends.
score:1
you can use legend's itemwidth property. here's the link
highcharts.chart('container', {
chart: {
width: 500
},
title: {
text: 'legend <em>itemwidth</em> option'
},
legend: {
itemwidth: 100
},
series: [{
data: [6, 4, 2],
name: 'first'
}, {
data: [7, 3, 2],
name: 'second'
}, {
data: [9, 4, 8],
name: 'third'
}, {
data: [1, 2, 6],
name: 'fourth'
}, {
data: [4, 6, 4],
name: 'fifth'
}, {
data: [1, 2, 7],
name: 'sixth'
}, {
data: [4, 2, 5],
name: 'seventh'
}, {
data: [8, 3, 2],
name: 'eighth'
}, {
data: [4, 5, 6],
name: 'ninth'
}]
});
Source: stackoverflow.com
Related Query
- split display legend in highcharts
- Highcharts - How to display legend symbol inside the tooltip
- Display legend items in two columns highcharts
- Highcharts - Display legend for Pie chart in two columns
- how to display 2 same highcharts without duplicate the code
- Change Highcharts Legend Display After Render
- Display custom tooltip on highcharts legend
- Highcharts display label for pie chart using html table as data source
- Highcharts How to display total of data classes in legend
- To display legend of the chart outside the canvas of the chart in highcharts
- Highcharts :: Need to split y-axis from primary body of chart. Can I display this axis separately from the Highchart?
- Display tooltip on hovering over the legend using Highcharts and jQuery-ui tooltip plugin
- How to display legend in Highcharts Waterfall Chart and make the sum column of waterfall appear in multiple colors?
- Clicking on a button triggers the same event twice? Strange behaviour for Highcharts legend display
- HighCharts Hide Series Name from the Legend
- How to modify highcharts legend item click event?
- How to display the value instead of percentage in a pie chart using jquery Highcharts
- Hiding a Highcharts series without using the legend
- Disable-Click on Legend in HighCharts Column Graph
- Always display data labels above columns in HighCharts
- Highcharts - Change legend index order
- Highcharts legend font sizes
- How to display No Data Available Message in highcharts
- Highcharts - How to programmatically toggle legend items and determine which items are selected
- Highcharts doesn't display series with lots of data points
- Add series total to legend in Highcharts
- Display tooltip for invisible series in Highcharts
- Filtering legend of a Highcharts by only visible series
- Add tooltip to legend in highcharts when hovering
- Highcharts - Legend Positioning outside the chart
More Query from same tag
- Custom bar chart text with Highcharts
- Checkbox refuses to be checked or unchecked on highchart
- Load highcharts dynamically with dynamic config option
- Changing Data for HighMaps JQuery to a local file
- Child component not loading correctly in ngFor (but updates after resizing windows)
- Highcharts use legend symbol and legend parms, not scatter marker symbols - in scatter plot
- Export Table and Chart In PDF In HIGHCHART with ANGULAR
- Render a list of highcharts in Rmarkdown
- Highcharts longshot, Set stylistically different gridLines for weekends..?
- Highchart polar with additional pie series below
- Highcharts dynamic data fetching in React
- Gauge Series of Highcharts with React not the Solid Gauge but Gauge Series
- dynamic highchart config in angular ui grid with angular js using pablojim's highcharts ng
- Apply outer border for the highchart area chart
- Resize Highcharts chart in Angular UI Modal
- highcharts zooming over line charts not working properly
- How can you have more than 10 colors represented in the graph and legend in highcharts?
- Make chart width exclude x axis labels
- shift y-axis from dumbell chart within the line
- Highcharts 9.1.1 export from fullscreen with print option- throw error on browser console Uncaught TypeError: a.hasAttribute is not a function
- Highcharts Combination Chart: Column covering line series marker
- Highcharts export button not showing (included the libraries etc)
- Angular. Highcharts. Column Chart. Positioning of Columns on X-Axis
- Change Style of Title in HighCharts in ActionResult
- Highcharts border curve inside
- Highcharts's onReady event?
- How to create semi pie progress with highcharts?
- HighChart Data label issue in bar chart
- HighCharts in R Shiny App
- Dealing with pie chart label overlap [Highcharts]