score:0
the highcharts colour option can be added to a specific series within a chart definition. so it can be added to a specific drilldown series as well:
drilldown: {
series: [
{
name: "chrome",
id: "chrome",
colors: [
'#db03fc',
'#03e3fc',
...
],
...
}
]
}
i am not aware of any methods within highcharts to easily colour a specific pie slice. by default, the colours from the colors
array will fill the slices in the same order the data is provided. if possible, it might help to control the colours by sorting the drilldown data to ensure the highest value is predictably filled with the first colour in the colors
array.
documentation: highcharts colours
score:0
i've always found that when i want to do very specific things with highcharts and colors, you need to pre-setup your data with a color
attribute. so, let's assume you have already constructed your data in a way that highcharts will understand it:
// data formatted so it can be dropped directly into
// a highcharts pie-chart
let top_data = [
{
name: "internet explorer",
y: 7.23,
drilldown: "internet explorer"
},{
name: "chrome",
y: 62.74,
drilldown: "chrome"
},{
name: "firefox",
y: 10.57,
drilldown: "firefox"
},{
name: "safari",
y: 5.58,
drilldown: "safari"
},{
name: "edge",
y: 4.02,
drilldown: "edge"
},{
name: "opera",
y: 1.92,
drilldown: "opera"
},{
name: "other",
y: 7.62,
drilldown: null
}];
and now you need to ensure that the largest category gets a specific color, so we will go ahead and sort the data:
// sort in descending order
// (this makes sure the 0th entry is the largest)
top_data.sort(function(a,b) {return b.y-a.y});
now, you can add the color
property to each of your blocks:
// color for largest slice
let top_color = 'blue';
// color array for the rest of the colors
let colors = highcharts.getoptions().colors;
top_data.foreach((dat,d) => {
if (d==0) {
// assign first (largest) entry to dedicated color
dat['color'] = top_color;
} else {
// assign slice to next color in list
dat['color'] = colors[(d-1)%colors.length];
}
});
now you pass this as the data object to the series parameter of the chart configuration.
in order to create a unique list of colors for the drilldown slices, you can set the array of colors in the colors
parameter of the chart. these colors will the propagate to the drilldown pie slices (without overriding any unique colors you specified for the top-level pie-chart slices). the final chart will have the following form:
// create the chart
highcharts.chart('container', {
chart: {
type: 'pie'
},
colors: ['blue', 'green', 'red'], // or any other unique list of colors
/* all your other config parameters ... */
series: [
{
name: "browsers",
colorbypoint: true,
data: top_data
}
],
/* and the rest, like your drilldown data */
});
Source: stackoverflow.com
Related Query
- Highcharts how to make a set number of colors for pie chart data and drilldown data
- Highcharts display label for pie chart using html table as data source
- Highcharts Theming: How to set gradient colors for certain chart types only?
- how to make chart real time with 2 line and get data from php with highcharts
- How to set pie chart wedge colors based on wedge values for highcharts?
- HIGHCHARTS How to to make separate colors for shaded region and the line in Area Graph
- How to set specific color for each data in pie chart using phplot.php
- How to draw a chart from one array of data and make labels on the chart from another array of data? Highcharts v.4.0.4
- How to make highcharts default to 0 for missing data
- Highcharts - How to set custom colors for the series
- Highcharts not displaying data labels for Pie chart in arabic
- Highcharts: How do I set dynamic data to the drilldown pie chart?
- HighCharts - Pie chart drilldown for multilevel (3 to 4 level)
- How get data name in Highcharts pie chart legend instead of "Slice" using array of values?
- How to make a pie chart from highcharts responsive
- highcharts donut pie - different color for the data than its drilldown
- How to format my json data for stack column chart in HighCharts
- How to center highcharts pie chart and legend on a page?
- Highcharts - where to place style and changing style for one wedge in a pie chart
- Highcharts - how to set textShadow for data labels
- highcharts pie chart color for dynamic data
- Highcharts series showing different data for 'column' and 'line' chart
- How to create pie chart with only 1 series data and have background be a circle
- How to dynamically set title in Pie Chart of Highcharts
- HighCharts how to add live series data set to existing chart
- Different xAxis label, max and colors for drilldown in Highcharts
- How to dynamically adjust dataGrouping and set variable time intervals for HighStock data (HighCharts)
- How to get Pie Chart data to display using AppCoda example and iOS Charts?
- How to make a HighCharts drilldown column/bar chart that does not hide the non-drilldown categories
- Highcharts to populate data for pie chart using json object
More Query from same tag
- How to parse the data from CSV FILE to arrays so it could be used for a pre-formatted Highchart
- Error in R with highcharter library
- Two columns with two legend items in highchars.js
- Highcharts 2 groups of series
- Unrecognized configuration section pages
- Java Script Type Error while adding Stock Chart to GWT SimplePanel
- HighCharts: Bar columns don't reach x-Axis on drill up
- How do I make the title blank disappear for a highchart spider chart?
- Highcharts: Add circle to scatter plot
- Highcharts: backgroundColour "layers"?
- HighCharts - making a Pie with MySQL and PHP
- Add new data to a Highchart pie chart dynamically
- Highchart label position for solid gauge is too high
- How to use HighCharts to plot aggregate hourly event rates?
- Highcharts + Bootstrap .table-responsive issue
- Pie Highchart Chart with multiple "ring's" around it
- Highcharts Multi-Depth 3d pie chart
- Group By DATE_FORMAT in SQL and Return Group of Unix Timestamps
- how to fetch data from json file in highchart
- Highcharts display percentage of hidden series
- Highcharts: "Print all" button
- Highcharts working only in FireFox browser
- Issue with last column width in Highcharts
- JavaScript - Chart does not show when is inside a div tag
- Is there a way to increase the sensitivity of a specific point, in the purpose of showing a tooltip?
- How can you add flags to points on a graph
- I can't use gauge-solid and spline chart at the same time by using HighCharts
- Multiple highstock charts on one page
- Round off the area points in Highcharts Polar
- Different color for plot outside range