[Drupal] How to customize the colors in highchart graphs

Highcharts is a charting library. It is very useful for adding interactive charts to your web site or web application. Follow the steps given below for highchart graph implementation with customizing of colors in each columns in it.

• Enable Libraries module.
• Download Highchart libary
  and extract to your sites/all/libraries.

Initialize highcharts library

/**
 * Implements hook_library_info
 */
function mymodule_libraries_info() {
  $libraries['highcharts'] = array( // Machine name.
    'name' => 'Highcharts library',
    'version arguments' => array(
      'file' => 'js/highcharts.js', // Could be any file with version info.
      'pattern' => '/v(\d\.){1,2}\d/', // Regular expression pattern matching version number.
      'lines' => 2,
    ),
    'files' => array(
      'js' => array('js/highcharts.js'), // Path to the file location.
    ),
  );
  return $libraries;
}

Write call back function

/**
 * Implements page call back
 */
function menu_call_back() {
  libraries_load('highcharts');
  drupal_add_js(drupal_get_path('module', 'module_name') . '/js/custom_highchart.js');
  /**
   * Add a div in your webpage with id. Set a specific width and height
   * which will be the width and height of your chart.
  */
}

Add the following codes to .js file

(function ($) {
  Drupal.behaviors.highcharts = {
    attach:function(context, settings) {
    var options = {
      chart: {
        type: 'column',
      },
      title: {
        text: 'ICC ODI Championship Rating '
      },
      subtitle: {
        text: 'ICC ODI Championship Rating'
      },
      xAxis: {
        type: 'category',
        categories: [],
        labels: {
          rotation: -45,
          style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif'
          }
        }
      },
      yAxis: {
        min: 0,
        title: {
          text: 'ICC ODI Championship Rating'
        }
      },
      legend: {
        enabled: false
      },
      tooltip: {
        pointFormat: '{point.y:.2f}'
      },
      series: []
    };

    series = {
        name: "ICC ODI Championship Rating",
        data: []
    };

    var colors = Highcharts.getOptions().colors;
    var index = 0;
    var highchart_value = '';
    var x_value = '';
    var y_value = '';
    var data = [['Australia', 122],['India', 116],['South Africa', 112],['New Zealand', 108],
      ['Sri Lanka', 107],['England', 101]];
    for (var i in data) {
      highchart_value = data[i].toString().split(",");
      x_value = graph_value[0];
      y_value = graph_value[1];
      if (parseFloat(y_value)) {
        options.xAxis.categories.push(x_value);
        series.data.push({
          y: parseFloat(y_value), color: colors[index]
        });
        if (index == 5) {
          index = 0;
        }
        else {
          index++;
        }
      }
    }
    options.series.push(series);
    // place your div id here
    jQuery('#my-high-graph).highcharts(options);
  }
});

Please let us know if we can provide any further assistance.