Post
Ask Question

Set Different color on Individual Bar in Bar Chart

Problem: Some time we need to have different color on each bar.

Bar Chart

To achieve this I used kendo UI control. First of all you need to add required kendo reference. Then follow below steps.

Html Code:

  1. <div id="chart" style="width: 873px; height: 300px;">  
  2. </div>  
Client Script:
  1. //define your data here colorField is responsible changing the color of each bar  
  2.   
  3.  var Pipelinedata = [{  
  4.           Name: "Pre",  
  5.           Value: 123,  
  6.           valueColor: "#BA55D3"  
  7.       }, {  
  8.           Name: "Application",  
  9.           Value: 124,  
  10.           valueColor: "#90EE90"  
  11.       }, {  
  12.   
  13.             Name: "Not,  
  14.             Value: 35345,  
  15.             valueColor: "#DC143C"  
  16.         }  
  17.       ];  
  18.   
  19. art").kendoChart({  
  20.           theme: "silver",  
  21.           title: {  
  22.               text: "abc "  
  23.           },  
  24.             
  25.   
  26.           dataSource: {  
  27.   
  28.               data: Pipelinedata  
  29.   
  30.           },  
  31.           transitions: false,  
  32.   
  33.           series: [{  
  34.               type: "column",  
  35.               field: "Value",  
  36.               colorField: "valueColor",  
  37.               labels: {  
  38.                   visible: true,  
  39.                   format: "{0:c0}"  
  40.   
  41.               }  
  42.           }],  
  43.           categoryAxis: {  
  44.               field: "Name",  
  45.               labels: {  
  46.                     
  47.                   color: "#293135"  
  48.               }  
  49.           },  
  50.           valueAxis: {  
  51.   
  52.               labels: {  
  53.                   template: "#= kendo.format('{0:N0}', value) # "  
  54.               },  
  55.               title: {  
  56.                   text: "Dollars"  
  57.               }  
  58.           },  
  59.           tooltip: {  
  60.               visible: true,  
  61.               template: "#=kendo.format('{0:c0}', value)# "  
  62.           }  
  63.       });  
If you find any difficulty please feel free to contact me.

Thanks
Kamal Samant