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
- highchats heatmap how to show all categories on y-axis
- Highcharts series update with animation
- Different Array(s) in Chrome Dev Tools
- Highlight area in highcharts
- Highcharts.stockChart Range Selector (zoom) Button Position After the Chart Container
- blank page in Highcharts
- Highcharts: Polar chart does not display series correctly in dinamically loaded data
- highcharts download/export image with rounded borders
- Enable/Disable `Navigator` pane in Highchart
- Change only "Input Date" text of HIghStock Chart without setExtrerems?
- What are the differences between tickinterval and minTickInterval in HighCharts? Please explain
- What is the fastest way to preprocess data?
- How to fix Prototype conflict with Highchart?
- Proper x-axis for Highcharts stack group column
- Highcharts - setting the yAxis title dynamically
- high charts from csv not drawing the chart on refresh page
- Get left and top position of highcharts scrollbar
- How could i put a highcharts funnel to rotate 90deg
- highcharts spline with multiple series update every few seconds
- Zoom hides last point from series
- Error multiple highcharts while loading in carousel
- Change highlight behavior in Highcharts
- How to put date into drilldown chart title based on drilled point x value (datetime)..?
- Show average in highcharts graph as column
- Highstock: Remove the word "Zoom" from the rangeSelector
- Highcharts Highmaps How to change projection with hc-transform
- export.highcharts.com bug? Changing order of series.index values not reflected in exported pics
- highcharts - do not show zeroes in labels and format
- how to insert data in the tooltip of a highcharts chart?
- JasperReports: HTML5 high chart X Axis label font size