score:2
Accepted answer
I would convert the data to be in the form of multiple series instead of one series, like this:
{
series : [
{ name: "John", color: "#FF5733", data: [3, 0, 3] }
{ name: "Parker", color: "#009900", data: [5, 0 4] }
.. etc ...
]
}
Then Highcharts will automatically use the person's name as the legend.
Here is a Fiddle to show what I mean.
I transformed the data to multiple series using this code:
var data = [];
var seriesLookup = {};
original.forEach(function(item){
var series = seriesLookup[item.name];
if(!series){
series = {
name: item.name,
color: item.color,
data: [0, 0, 0]
};
data.push(series);
seriesLookup[item.name] = series;
}
series.data[item.x] = item.y;
});
Then I changed the tooltip.pointFormat
to use series.name
instead of point.name
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
I also used the dataLabels.formatter
to ignore 0 values.
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
formatter: function(){
return (this.y!=0) ? this.y : "";
}
}
score:0
You can also just set legendType: 'point'
:
series: [{
legendType: 'point',
data: [ ... ]
}]
Live demo: http://jsfiddle.net/BlackLabel/9kqLsfza/
Source: stackoverflow.com
Related Query
- How to show Legends for all the series data in stacked column chart Highcharts?
- How to add different series data for each categories in Stacked Column chart in Highcharts?
- highcharts - precision for stacked column chart data labels
- How to format my json data for stack column chart in HighCharts
- How To Show All Data Labels For Datetime Axis In Highcharts
- Highcharts series doesnt show data and render the chart
- How can i load external json data in highcharts to show the bar chart
- Add new series to the top of a highcharts stacked column chart
- Highcharts do not hold all the values of stacked columns chart with data time axes
- How to Create a Stacked Column Chart with Dynamic Series in Highcharts
- Highcharts - Sankey chart not displaying all the data when series font increased
- HIGHCHARTS - Given a series with UNIX stamps and values pairs for the data, how do I show only the date for the first and last point on xAxis?
- Highcharts Stacked column drill down not working?> How to set drill down series for my scenario?
- Highcharts : How to align column chart and bubble chart vertically in the same series
- Highcharts data from Google spreadsheet show line chart for one series
- How do I hide the code for the chart data in highcharts?
- How can i hide all the Series in highcharts at a time
- How to show a column with the value Zero in Column chart in Highcharts?
- How to make stacked column graph to show total data value on top
- Highcharts - How to set custom colors for the series
- How can I delete all of the points from a highcharts series
- Use single color for all series in the same chart
- Sort the series data for every X-Axis in Highcharts
- Highcharts 3.0, area chart with stacked and unstacked series - how to fix?
- How do I hide a Highcharts series from the chart, but always show it in the tooltip?
- How to use add series and update methods in the high chart wrapper for angular?
- Highcharts Bubble Chart - How to move an individual point's data label (dataLabel) to the front/top
- How to show 0 for incomplete Series in Highcharts
- How to show the json data in Pie chart HighChart?
- Highcharts show the same yAxis start and end value with multiple data series
More Query from same tag
- Highcharts - label placement for categorized y-axis
- how to make highcharts pie datalabels always in center of each slice?
- Show only month labels on HighChart xAxis
- How to change color of bar in column chart with different level of percentage in highcharts
- Highstock Time series not formatting on scatter tooltip
- Hide Highcharts export buton for mobile devices
- How can we customise the series data object property names "name" & "y" as part of highcharts-angular?
- Highcharts, influxdb and nodejs, how to display data of influxdb in highcharts using influxdb-nodejs?
- How to add specific values to highchart
- Issue on Fitting Highcharts.js in Bootstrap 3 Panels
- Uncaught TypeError: Cannot read property 'addPoint' of undefined ( Highstock live data)
- Custom Drill No Longer Functioning
- How to display custom or non-series data array on Highcharts tooltip on hover?
- How to call a JS function every 10 sec which then activates a function in angular
- Posting data to the server from highchart points
- what class is required from bootstrap to size the asp.net chart
- Is it possible to create a chart which has conditional coloring and also shows up in legend?
- Highcharts - dynamically modifying SVG of flag series
- load data from text file into HIGHCHART graphic using PHP
- Highcharts show the same yAxis start and end value with multiple data series
- Highcharts: Combined line and column chart - start / end line on left / right side, not on column chart data points
- Highcharts - Display only specific series in specific category?
- highcharts zoom bug (column chart)
- Highcharts - hold relation among multiple series after grouping / approximation
- Keep rangeSelector visible but disable editing
- How to stop screen from moving up?
- Update Highchart data form exported button
- Can I use different if-conditions in Highstock-code?
- How do I completely hide the chart title in a HighCharts chart?
- Create array from string - with complex types for highchart