Next
Update
Prev
Default

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

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

...
<Column3DChart ... >
'''
  <Column3DSeries ... fillJsFunction="fillJsFunc" >
    ...
  </Column3DSeries>
...
</Column3DChart>
...

function fillJsFunc(seriesId, index, data, values)
{
  if (values[1] > 2000)
    return {"color":"0x43a9ff", "alpha":0.7};
  else if (values[1] > 1000)
    return "0xbde030";
  else
    return {"color":"0xfa880d", "alpha":0.5};	
}

© 2017 KoolChart. All rights reserved.