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
  3. var Pipelinedata = [{
  4. Name: "Pre",
  5. Value: 123,
  6. valueColor: "#BA55D3"
  7. }, {
  8. Name: "Application",
  9. Value: 124,
  10. valueColor: "#90EE90"
  11. }, {
  13. Name: "Not,
  14. Value: 35345,
  15. valueColor: "#DC143C"
  16. }
  17. ];
  19. art").kendoChart({
  20. theme: "silver",
  21. title: {
  22. text: "abc "
  23. },
  26. dataSource: {
  28. data: Pipelinedata
  30. },
  31. transitions: false,
  33. series: [{
  34. type: "column",
  35. field: "Value",
  36. colorField: "valueColor",
  37. labels: {
  38. visible: true,
  39. format: "{0:c0}"
  41. }
  42. }],
  43. categoryAxis: {
  44. field: "Name",
  45. labels: {
  47. color: "#293135"
  48. }
  49. },
  50. valueAxis: {
  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