Search code examples
phpmysqlchartsmorris.js

How can I color the dynamic data of the pie chart using morris js?

I fetched the data from the database and with the help of Morris JS I showed it on Donut pie chart. But the color of the pie chart sections seems similar . How can I change the color of the different section in pie chart.

Here is the Code : 

$row->execute(); 
$json_data=array();  
foreach($row as $rec)  
{  
$json_array['label']=$rec['user_type'];  
$json_array['value']=$rec['id']; 

array_push($json_data,$json_array);  
}  

{ ?>    
<div id="donut-example" style="height: 250px;"></div>

<script type="application/javascript">

Morris.Donut({
element: 'donut-example',
data: <?php echo json_encode($json_data)?>
});

</script>

And here is the result Image : pie chart by morris

please tell me how can I change the color in different section of the Pie Chart.

Solution

  • As per the Morris Donut example, you need to provide an array of colours:

    Morris.Donut({
 colors: [
    '#0BA462',
    '#39B580',
    '#67C69D',
    '#95D7BB'
  ]
});

    There is the ability also to set the labelColor globally or individually (per datum).