Next
Update
Prev
Default

You can fill color in the pie chart using the JavaScript function. To fill custom color in the pie chart, you must set a JavaScript function name to the value of fillJsFunction attribute in the <Pie2DSeries> or <Pie3DSeries> element tags.

This sample pie chart is to show how to define a JavaScript function to fill custom color in the pie chart based on data values.

...
<Pie3DChart ... >
'''
  <Pie3DSeries ... fillJsFunction="fillJsFunc" >
    ...
  </Pie3DSeries>
...
</Pie3DChart>
...
					
function fillJsFunc(seriesId, index, data, values)
{
  if(values[0] > 2000)
    return "#de4540";
  else if(values[0] > 1800)
    return "#f0584e";
  else if(values[0] > 1600)
    return "#f56b49";
  else if(values[0] > 1400)
    return "#f87a41";
  else if(values[0] > 1200)
    return "#fa8939";
  else
    return "#ffa158";
}

© 2017 KoolChart. All rights reserved.