score:1
Accepted answer
You can achieve it by defining colorByPoint: true
property for each series. Like this:
Highcharts.chart('container', {
...
drilldown: {
series: [
{
colorByPoint: true,
name: "Chrome",
id: "Chrome",
data: [
...
]
},
{
name: "Firefox",
id: "Firefox",
colorByPoint: true,
data: [
...
]
},
{
name: "Internet Explorer",
id: "Internet Explorer",
colorByPoint: true,
data: [
...
]
},
{
name: "Safari",
id: "Safari",
colorByPoint: true,
data: [
...
]
},
{
name: "Edge",
id: "Edge",
colorByPoint: true,
data: [
...
]
},
{
name: "Opera",
id: "Opera",
colorByPoint: true,
data: [
...
]
}
]
}
});
Check this fiddle - https://jsfiddle.net/30o1genk/
UPD: When you add series dynamically after a drilldown, your drilldown event handler should looks like this:
events: {
drilldown: function(e) {
const point = e.point;
const series = {
colorByPoint: true,
data: [{name: "test", y: 10}, {name: "test2", y: 20}],
};
this.addSingleSeriesAsDrilldown(point, series, false)
this.applyDrilldown();
}
}
Check this fiddle - https://jsfiddle.net/1fpdckn5/ for the dynamic case.
score:0
You can set a wanted color for each drilldown series.
Demo: https://jsfiddle.net/BlackLabel/1vbyp53w/
drilldown: {
series: [{
name: "Chrome",
id: "Chrome",
color: 'orange',
data: [
...
]
},
{
name: "Firefox",
color: 'red',
id: "Firefox",
data: [
...
]
},
{
name: "Internet Explorer",
id: "Internet Explorer",
color: 'blue',
data: [
...
]
},
]
}
Source: stackoverflow.com
Related Query
- Highcharts. Series have same color after drilldown
- How to have multiple highcharts with different series data in vuejs without repeating code
- Column based Highchart drilldown series assign color code to each column
- Highcharts legend position same as tooltip position or make tooltip still visible after hiden series
- Change color of different points in same series Highcharts
- Setting highcharts datalabels backgroundColor with the same color of its piechart series
- make xaxis datalabels have same color like bar Highcharts
- Changing series color in highcharts dynamically
- Get Highcharts Series Data after Load
- Change Highcharts Series color
- Use single color for all series in the same chart
- Is it possible in highcharts to have 2 charts, sharing the same x-axis, but next to one another?
- Highcharts : Showing wrong color in data series
- How can i keep the color the same in highcharts
- Single series drilldown to multiple series Highcharts
- Highcharts multiple series drilldown to multiple series
- Need to make tooltip border color same as marker color using Highcharts
- drilldown maps and funnell charts on the same page using highcharts
- Highcharts hide series without change legend color
- spline is not plotting after drilldown - HighCharts
- Highcharts --- Change sliced color on drilldown pie chart
- Highcharts sankey diagram, series color
- highcharts donut pie - different color for the data than its drilldown
- How to color series legend in highcharts when colorbypoint is set to true
- Highcharts solidgauge legend symbol not taking series color
- Highcharts show the same yAxis start and end value with multiple data series
- highcharts - error when updating a series to have less categories than previously
- How to add series after click event in HighCharts
- Setting highcharts datalabels backgroundColor with the same color of its serie
- how to display 2 same highcharts without duplicate the code
More Query from same tag
- How to get number of pixels between two points in Highcharts?
- Disable all UI events on highcharts
- Pass PHP result-set to JavaScript array in Highchart?
- Make gap size proportional to gap in series data
- Change the zoom level for highmaps
- Highcharts: overlay label on a graph
- Highcharts how to show certain tooltips and don't show others
- How to get different colors for every column in a stacked column chart
- Highcharts: Moving yaxis label to the top left of chart
- Create entire highchart object on server side
- angular2, angular2-highcharts. Remove a chart from the page
- JSON data not showing in highstock Candlestick chart using PHP & MYSQL
- Jquery Graph to display Engine Status
- Can I Create a Single HighCharts Graph from Multiple Data Sources (Multiple GoogleSheets in this case)
- HighCharts not displaying all the categories
- Highcharts date off by one day
- Difference between highcharts and highstock during real time trace and xAxis with max value
- highchart/highstock tooltip does not adjust after zoom
- Rally Pie chart listener not working
- RCharts - Choosing color by category column chart
- Highchart Heatmap remove empty rows on legend toggle
- highcharts piechart - small number of colors
- highchart's hidden chart renders out of container in Angularjs
- Build charts from polling JSON data
- Strip/escape special characters from Google Spreadsheet field before passing data to Highcharts Graph
- Highchart.js: use bootstrap glyphicons instead of symbols on contextbutton
- ng2-highcharts chart update after load
- Is it possible to have multiple highcharts with one id?
- Why mistake appears during render?
- Highcharts - add points to all series using json