title: Changing Color of Data Labels in HighCharts Bar Chart
body: <p>I want to set the color of my data labels. My current code is at the bottom.</p>
  
  <p>Specifically, I want to make the color of the data labels corresponding to the gray bars gray and the green bars green. How would I do this?</p>
  
  <p>So to clarify, for instance the first bar the value 96.6 will be gray and the value 45 will be green. Right now it's all black.</p>
  
  <p>I'd appreciate the help. Thank you.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Highcharts.chart('container', {
      chart: {
          type: 'bar'
         
      },
      title: {
          text: null,
          align: 'center',
          verticalAlign: 'bottom',
         
          
          
      },
      
   
         xAxis: {
          categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9','10','11-17','18-28', '29+'],
          title: {
              text: 'Visits Per Customer (TTM)'
          },
          
          
          
      },
      
      
      yAxis: {
          min: 0,
          title: {
              text: 'Average Return Rate Overall: 64 Days',
              y: 10
          },
          labels: {
              overflow: 'justify'
          }
      },
      
      /*
      
      tooltip: {
          valueSuffix: 'millions'
      },
      
      */
      
      
      tooltip: {
      
      headerFormat: '&lt;span style="font-size:10px"&gt;{point.key}&lt;/span&gt;&lt;table&gt;',
          pointFormat: '&lt;tr&gt;&lt;td style="color:{series.color};padding:0"&gt;{series.name}: &lt;/td&gt;' +
              '&lt;td style="padding:0"&gt;&lt;b&gt;{point.y:.0f} mm&lt;/b&gt;&lt;/td&gt;&lt;/tr&gt;',
          footerFormat: '&lt;/table&gt;',
          shared: true,
          useHTML: true
      },
      
      
      plotOptions: {
          bar: {
              dataLabels: {
                  enabled: true,        
              
                        
              }
          }
      },
      
      
      legend: {
          layout: 'horizontal',
          align: 'right',
          verticalAlign: 'top',
          x: 0,
          y: 5,
          floating: true,
          borderWidth: 1,
          backgroundColor: ((Highcharts.theme &amp;&amp; Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
          shadow: true
      },
      credits: {
          enabled: false
      },
      
      
      series: [{
          name: 'Q1 / 18 (TTM) Annual Guest Value',
          data: [0, 96.6 , 73.2 , 60.3 , 52.5 , 46.6 , 41.4 , 37.5 , 34.4 , 31.9 , 25.4 , 17.0 , 9.7],
          
          color: 'grey'
          
      }, {
          name: 'Days Between 1st and 2nd Visits',
          data: [23, 45, 65, 85, 105, 125 , 144 , 163 , 179 , 199 , 258 , 394, 847],
          color: 'green'
          
      }]
      
         
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/export-data.js"&gt;&lt;/script&gt;
  
  &lt;div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>