35265

How to set pie chart wedge colors based on wedge values for highcharts?

Question:

I'm building a pie chart in Highcharts: <a href="http://jsfiddle.net/y3j8ybrg/" rel="nofollow">http://jsfiddle.net/y3j8ybrg/</a>

I want to be able to set the background color of each wedge based on the value of the data that wedge represents.

The API documentation doesn't seem to make this available. It shows how one can use a closure or function to generate the colors array but not how one can give that function access to the point value.

HTML:

<script src="http://code.highcharts.com/highcharts.js"></script> <div id="container" style="height: 400px"></div> <button id="button">Add point</button>

JavaScript:

$(function () { var chart = new Highcharts.Chart({ chart: { renderTo: 'container', plotBackgroundColor: '#323f48', plotBorderColor: '#323f48', plotBorderWidth: 0, plotShadow: false, backgroundColor: '#323f48', borderColor: '#323f48' }, title: { text: 'CHART<br/><span class="white">sub-header</span>', align: 'center', verticalAlign: 'middle', y: -3, style: { fontWeight: 'bold', color: 'white', fontSize: '10px' } }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { dataLabels: { enabled: true, distance: -510, style: { fontWeight: 'bold', color: '#323f48' } }, startAngle: -180, endAngle: 180, center: ['50%', '50%'], animation: false, borderColor: '#323f48', borderWidth: '0px' } }, series: [{ type: 'pie', name: 'days', innerSize: '90%', data: [ ['empty', 56.00], ['days', 44.00], ], // I want this to be a function that returns a color depending upon the data series point value. colors: (function(){return [ '#59636b', '#8edd65' ]})(), }], }); });

Answer1:

Probably best to either pre-calculate the colors and create the data array as {x: 'empty', y: 56.00, color: '#somecolorhex',.. or to update the colors on load in a chart.events.load call. You could add the getColor() function in the data element as well but you would have to repeat the data value.

getColor = function(val) { if (val >= 50) { return 'red' } else { return 'blue' } } series: [{ type: 'pie', name: 'days', innerSize: '90%', data: [{ x: 'empty', y: 56.00, color: getColor(56.00) }, { x: 'days', y: 44.00, color: getColor(44.00) }] }]

Sample <a href="http://jsfiddle.net/wergeld/y3j8ybrg/1/" rel="nofollow">jsfiddle</a>

Recommend

  • C#: Import/Export Settings into/from a File
  • Syntax error on tokens, AnnotationName expected instead - error on query
  • JSR-330 support in Picocontainer : @Inject … @Named(\"xxx)
  • How can I display the parent menu item's description using Wordpress walkers?
  • How to view images from protected folder with php?
  • D3 get axis values on zoom event
  • Display images in Django
  • Custom validator control occupying space even though display set to dynamic
  • How do I alternate colors in Flat List (React Native)
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Change multiple background-images with jQuery
  • How to install a .deb file on a jailbroken iphone programmatically?
  • FileReader+canvas image loading problem
  • DomPDF {PAGE_NUM} not on first page
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Javascript simulate pressing enter in input box
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Resize panoramic image to fixed size
  • How to set/get protobuf's extension field in Go?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Change an a tag attribute in JavaScript based on screen width
  • How to show dropdown in excel using jrxml (jasper api)?
  • Importing jscolor library in angular 2
  • jquery mobile loadPage not working
  • Unanticipated behavior
  • A cron job substitute?
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • How to stop GridView from loading again when I press back button?
  • How to get Windows thread pool to call class member function?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal