score:41
For a pie chart you have to set the slice color inside data
.
And you have to use the point name
and not serie type, serie type will always be "pie"
.
For this you can use javascript object notation to store which color each serie will have.
It's fastar than use a switch
.
var getColor = {
'AB': '#C6F9D2',
'BC': '#CCCCB3',
'CL': '#CECEFF',
'CI': '#FFCAFF',
'HB': '#D0CCCD',
'ON': '#FFCC99',
'PM': '#FFCBB9',
'SR': '#EAEC93',
'TS': '#D7FBE6',
'IS': '#FFCACA',
'FREE': '#00FF00'
};
series: [{
type: 'pie',
name: 'Current selection',
data: [
{
name: 'AB',
y: 45.0,
color: getColor['AB']
}, {
name: 'BC',
y: 26.8,
color: getColor['BC']
}, {
name: 'CL',
y: 12.8,
sliced: true,
selected: true,
color: getColor['CL']
}, {
name: 'CI',
y: 8.5,
color: getColor['CI']
}, {
name: 'HB',
y: 6.2,
color: getColor['HB']
}, {
name: 'ON',
y: 0.7,
color: getColor['ON']
}
]
}]
You can see it working here.
score:-1
I use Highcharts without giving any color property as it is using their own library for auto select color. Use below, hope it will work for u
series: [{
type: 'pie',
name: 'Current selection',
data: [
['Name_1', 537],
['Name_2', 181],
['Name_3', 156]
]
}]
we can set highchart custom color by setOption function
Highcharts.setOptions({
colors: ['#F64A16', '#0ECDFD', '#FFF000']
});
score:0
The return
statement you have there is returning from the function being passed to the each
function, not the color function. Also, there's no need to use a switch case for this in JavaScript.
EDIT: Try something like this
series: [{
type: 'pie',
name: 'Current selection',
color: {
'AB': '#C6F9D2',
'BC': '#CCCCB3',
'CL': '#CECEFF',
'CI': '#FFCAFF',
'HB': '#D0CCCD',
'ON': '#FFCC99',
'PM': '#FFCBB9',
'SR': '#EAEC93',
'TS': '#D7FBE6',
'IS': '#FFCACA',
'FREE': '#00FF00'
}[this.type]
}]
It's not really clear from your code what ret
is, so I'm not sure the above code works, but it should give you a rough idea of how it can be done.
score:0
Why not set the color property when you push the data series to the chart? Without seeing what you are using to build your series object I can only provide some psuedo-code:
for each seriesItem in seriesList (
set highcharts.series[seriesItem].name = seriesList[seriesItem].seriesTitle
set highcharts.series[seriesItem].data = seriesList[seriesItem].data
set highcharts.series[seriesItem].Note = seriesList[seriesItem].extraInfo
set highcharts.series[seriesItem].color = switch (seriesList[seriesItem].type) {
case 'AB': return '#C6F9D2';
case 'BC': return '#CCCCB3';
case 'CL': return '#CECEFF';
case 'CI': return '#FFCAFF';
case 'HB': return '#D0CCCD';
case 'ON': return '#FFCC99';
case 'PM': return '#FFCBB9';
case 'SR': return '#EAEC93';
case 'TS': return '#D7FBE6';
case 'IS': return '#FFCACA';
case 'FREE': return '#00FF00';
}
)
Essentially you preprocess the data series elements. See this question for explicit formatting. You can set the color
property of a series - you do not have to depend on the default HighCharts color list or a custom color list as described in another answer. Note that the color
property is not listed in the HighCharts API reference but you can use it.
Source: stackoverflow.com
Related Query
- highcharts: dynamically define colors in pie chart
- Highcharts - Pie Chart change slice colors dynamically
- Define colors in pie chart dynamically data
- Highcharts pie chart dynamically changes size
- How to center chart title position dynamically inside pie chart in highcharts
- Pie chart Slice color Change Dynamically in Highcharts
- How to dynamically set title in Pie Chart of Highcharts
- Highcharts display label for pie chart using html table as data source
- Highcharts pie chart legend items showing gradient colors
- Highcharts how to make a set number of colors for pie chart data and drilldown data
- How to display the value instead of percentage in a pie chart using jquery Highcharts
- HighCharts - Make the pie chart 100% of the div
- Place text in center of pie chart - Highcharts
- Highcharts - labels inside and outside a pie chart
- Highcharts Pie Chart ignores percentageDecimals tooltip setting and has floating point inaccuracy issue
- Highcharts not displaying data labels for Pie chart in arabic
- Dynamically update Highcharts chart in react
- Total of values in HighCharts Pie Chart
- HighCharts Pie Chart - Add text inside each slice
- highcharts - chart names for multiple pie chart series in one chart
- HighCharts Dynamically Change Chart Type
- Highcharts Pie Chart Drilldown not showing on third drill
- Highcharts Pie Chart Label Threshold
- HighCharts - Pie chart drilldown for multilevel (3 to 4 level)
- Grand Totals in HighCharts Pie Chart Legend
- HighCharts Pie Chart Legend value alignment
- Issue Dynamically Changing HighCharts Chart Title
- How get data name in Highcharts pie chart legend instead of "Slice" using array of values?
- Rotating dataLabels in a Highcharts pie chart
- Update Chart Colors When Using Styled HighCharts Version
More Query from same tag
- Is this possible with Highchart
- highcharts refresh CSV data is duplicating not refreshing
- Remove the strikethrough on legend symbols for line charts?
- d3 and Highcharts diagram with parent and common node
- Highcharts same types of data with different series
- How to remove HighCharts new Hover Effect?
- Data label position
- When using canvg to convert Highchart SVG into PNG, all text appears twice - how to solve?
- Highcharts read data from XML throught attributes
- Flexdashboards and Leaflet and marker click with Highcharts
- Customize Highcharts tooltip
- Highcharts synchronized charts with multiple axes datasets
- How to do grouping in Array of Objects in angular 8
- pushing dynamic data to stacked percentage column in highcharts
- Highcharts pie with strokes
- How to keep x-axis max value not changed in Highcharts?
- Highcharts add external tooltip into specific div
- High charts using candlestick,vloum and MACD
- Highcharts: add custom text bottom left, like credits?
- Drawing mysql data with highcharts
- Get selected point(s) indices on zoom in Highcharts
- Highcharts use dateTime for chart generation
- Custom Drill No Longer Functioning
- How to create a scatter plot with non-numbers as values?
- How to get vertical scrollbar in highstock for heatmap chart
- VU meter: datalabel does not show in its position
- How to overcome missing values in Highstock-Stockchart?
- Is it possible to change linecolor for timeline chart in between specific points?
- How to extend Tooltip Range in Highcharts
- Using local file instead of $.getJSON