0

I have this column chart up and running here, I want to change the color of the column to red if the party is Republican and Blue if the party is Democratic. And I guess I can use a default color for Third-Party and Unknown or Not Designated. Not really sure the best way to do this with the Highcharts setup.

Here is the code so far:

         $(document).ready(function() {
 var options = {
 // basic chart options
 chart: {

   renderTo: 'container',
   type: 'column',
   marginRight: 130,
   // lang: {
   //    thousandsSep: ','
   //},
   marginBottom: 50,
   style: {
     fontFamily: 'Source Sans Pro, arial, helvetica, sans-serif'
   },
   // 3D initialization, comment out for non-3D columns
   options3d: {
     // sets all params for 3D angles
     enabled: true,
     alpha: 0,
     beta: 0,
     depth: 25,
     viewDistance: 10
   }
 },
 // main chart title (TOP)
 title: {
   text: 'Giving Trends',
   style: {
     fontWeight: 'bold'
   },
   x: -20 //center
 },
 // main chart sub-title (TOP)
 subtitle: {
   text: 'By Party of Filer',
   style: {
     fontWeight: 'bold'
   },
   x: -20
 },
 // xAxis title
 xAxis: {
   lineWidth: 0,
   minorGridLineWidth: 0,
   gridLineWidth: 0,
   lineColor: 'transparent',

   labels: {

     formatter: function() {
       // custom formatter

       if (this.value == 0) {
         return '(Not Designated)';

       } else {

         return this.value;
       }
     },

     enabled: false,
     style: {
       color: '#000',
       fontWeight: 'bold',
       fontSize: '12px',
       overflow: 'auto'
     }

   },
   minorTickLength: 0,
   tickLength: 0,
   reversed: false,
   title: {
     text: '',
     style: {

       color: '#000000'
     },
   },
   categories: []
 },
 // yAxis title
 yAxis: {
   labels: {
     format: '$ {value}',
     formatter: function() {
       return '$' + Highcharts.numberFormat(this.value, 0, '', ',');
     },
     style: {
       fontWeight: 'bold',
       color: '#000000'
     }
   },
   lang: {
     thousandsSep: ','
   },
   title: {
     text: '',
     style: {
       fontWeight: 'bold',
       color: '#000000',

     }
   },
   // chart options for each plotted point
   plotLines: [{
     value: 0,
     width: 0

   }]
 },
 // tooltip on hover options
 tooltip: {
   // lang: {
   //    thousandsSep: ','
   // },
   useHTML: true,
   style: {
     fontWeight: 'bold',

   },

   formatter: function() {
     // custom formatter for followthemoney.org, formats the tooltip to show nulls as not designated
     if (this.x == null) {
       return this.series.name + '<br/><hr>' + '(Not Designated)' + ': $' + Highcharts.numberFormat(this.y, 0)
     } else if (this.x == '') {
       return '(Not Designated)' + '<br/><hr/>' + '$' + Highcharts.numberFormat(this.y, 0);
     } else {
       return this.series.name + '<hr/>' + this.x + ': $' + Highcharts.numberFormat(this.y, 0);
     }

   }
 },
 legend: {
   layout: 'horizontal',
   align: 'left',
   verticalAlign: 'top',
   x: 0,
   y: 0,
   borderWidth: 0,
 },
 plotOptions: {

   allowDecimals: {
     enabled: false
   },
   series: {
     text: 'Total Dollar Amount',
     color: 'rgba(52,152,219, 0.9)',
     fontWeight: 'bold',
     cursor: 'pointer',
     connectNulls: true,
     pointWidth: 100
   },
   column: {
     stacking: 'normal',
     dataLabels: {
       enabled: true,
       y: -50,
       align: 'center',
       verticalAlign: 'top',
       borderRadius: 5,
       backgroundColor: 'rgba(252, 255, 197, 0.7)',
       borderWidth: 1,

       borderColor: '#AAA',

       // format the xAxis labels to handle null and blank values from database
       formatter: function() {
         if (this.x == null) {
           return '(Not Designated)' + '<br/><hr/>' + '$' + Highcharts.numberFormat(this.y, 0);
         } else if (this.x == '') {
           return '(Not Designated)' + '<br/><hr/>' + '$' + Highcharts.numberFormat(this.y, 0);
         }
         return this.x + '<br/><hr/>' + '$' + Highcharts.numberFormat(this.y, 0);
       }

     }
   }
 },
 series: []

}

Highcharts.setOptions({
 // sets comma for thousands separator - globally*
 lang: {
   thousandsSep: ','
 },
 tooltip: {
   xDecimals: -2 // If you want to add 2 decimals
 },

});

 $.getJSON("/charts/data/contributor-data.php?<?php echo    $_SERVER['QUERY_STRING']; ?>", function(json) {
 options.xAxis.categories = json[0]['data'];
 options.series[0] = json[1];
 chart = new Highcharts.Chart(options);
 chart.legend.allItems[0].update({
   name: 'Giving Trends by Party'
 }); ///// LEGEND MAIN LABEL CHANGES HERE!


  });
});
UX.DevDude
  • 185
  • 3
  • 14

1 Answers1

1

There are several ways to do this You can go through all categories and change color by category name. Check this link

var chart = $('#container').highcharts();
    $.each(chart.series[0].data, function(i,point){
        if(point.category == 'Mar')
            point.update({
                color:'#FF0000'  
            });
    });

Also you can check some useful advices here

Community
  • 1
  • 1
  • I first said this did not work, but I found the spot it needed to go so I will post it now, thanks again for your code example! – UX.DevDude Feb 24 '16 at 17:56
  • 2
    In your fiddle there is a single update, but OP is requiring multiple updates, so redraw argument (omitted in you code, so defaults to true) for [update](http://api.highcharts.com/highcharts#Point.update) function should be set to false and a [`chart.redraw()`](http://api.highcharts.com/highcharts#Chart.redraw) should be called after `$.each()` function for optimal performance. – Kacper Madej Feb 25 '16 at 11:28