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
- Scrape Highcharts data to CSV file
- Area chart,scrollable, with selectors and range filters
- how to use Bootstrap font icons on x-axis lables in highcharts
- How to import highchart-more into angular 4 project
- Highchart Click Event
- Highcharts javascript
- Using a JSON Object in HighCharts
- Array loop to determine a range average
- How can I prepare a Group Stacked Bar Chart in Highcharts using multiple and different types of data?
- Plotting multiple points in highchart timeseries
- Use array data in highcharts
- Highcharts transform JSON into data without losing informations
- How to create data in Json format for highcharts
- In Highstock charts, Drill down not correctly showing when scrolled
- Highcharts's pie chart minSize option not working
- Achieving communication between HighCharts and server.R
- jquery display 2 series hightchart from database
- Highcharts: Disable marker rotation in inverted chart
- Highcharts issue when start index is less than 0
- Highcharts - Grouping certain columns in a series together while maintaining proper column widths
- Highcharts only loads Title / Subtitle
- Refresh an Angular page (controller $scope, directive $scope) to emulate a first load of a page not $window.location.reload
- How to add footer for each series stacked horizontal bars in highcharts?
- Highcharts remove space before first bar and after last
- Most optimal way to load data in Highcharts
- Highcharts complex bar chart design with circular annotation or secondary legend
- Highcharts - Stack Chart to Stack Chart in Drilldown
- how to draw hour and minute value (hh:mm) pie chart using highcharts,javascript
- Grouped and stacked columns with shared series
- The HighCharts CSV export module went missing