How to format column chart labels

Question

To format shortcuts for data in columns of a chart, as shown in the image, you need to format only the second bar.

The code I tried to show below

[$('#voo-accepted-orders-graph').highcharts({ chart: { type: 'column', backgroundColor: '#9a97de', minPadding: 0.08, maxPadding: 0.08, }, title: { text: '' }, legend: { enabled: false, }, exporting: { enabled: false }, credits: { enabled: false }, xAxis: { tickWidth: 0, gridLineWidth: 0, gridLineColor: "#5c6bc0", categories: \['accepted', 'auto-accept', 'sent to PO', 'transfers'\], labels: { style: { color: '#ffffff', fontFamily: "Avenir LT std light", fontSize: "12px", zIndex: 1000 } } }, yAxis: { allowDecimals: false, title: { text: '' }, gridLineWidth: 0, labels: { enabled: false }, min: 0, tickInterval: 20, }, tooltip: { pointFormat: '{series.name} <b>{point.y:,.0f}</b><br/>' }, plotOptions: { column: { color: '#8381cc', borderColor: '#8381cc', }, series: { borderWidth: 0, dataLabels: { enabled: true, zIndex: 10, color: "#fff", style: { textShadow: false, fontWeight: "normal", } } } }, series: \[{ name: 'orders', data: \[200, 72, 36, 15\] }, { name: 'price', data: \[90, 150, 120, 50\] }\] });][1] 

Also 1. You need to format only the second bar. 2. Is it possible to get vertical lines.

Answer 1

July 8, 2016 . I updated this answer to consider the original question of adding a background behind the x-axis labels .. p>

If you want to change labels for only one data column, you simply add more attributes to a specific point in this series.

Using the code in your question, I changed the first point of the "price" series so that its label is red and bold:

 series: [{ name: 'orders', data: [200, 72, 36, 15] }, { name: 'price', data: [ { // change the values for just this point y: 90, dataLabels: { color: 'red', style: { fontWeight: 'bold' } } }, 150, 120, 50] }] 

For your subsequent question about adding a background behind the X-axis labels, I mentioned post Highchart: Background color of the axis . Here is the code I used:

First, before you define the chart parameters, I added a function to draw a rectangle behind the x-axis labels.

  // the following code is derived from Mark answer on: // /questions/1472779/highchart-background-color-of-axis // and using the setExtremes() function found in the Highcharts API documentation at: // http://api.highcharts.com/highcharts#Axis.getExtremes var rect = null; function drawRect(chart){ if (rect){ rect.element.remove(); } // this code draws a rectangle based on the chart dimensions: // 1st attribute: left edge = 0 // 2nd attribute: top edge = chart height - (chart bottom margin - 1) ... -1 to show axis baseline // 3rd attribute: width = chart width // 4th attribute: height = chart bottom margin // 5th attribute: corner radius = 0 ... no corners rect = chart.renderer.rect(0, chart.chartHeight - (chart.marginBottom-1), chart.chartWidth , chart.marginBottom, 0) .attr({ 'stroke-width': 0, stroke: '#888888', fill: '#888888', zIndex: 3 }) .add(); } 

Then I set some events in the chart options:

 chart: { type: 'column', backgroundColor: '#9a97de', minPadding: 0.08, maxPadding: 0.08, // events code from /questions/1472779/highchart-background-color-of-axis events: { load: function() { drawRect(this); }, redraw: function(){ drawRect(this); } } }, 

Here is the result:

Here you can find a working script: http://jsfiddle.net/brightmatrix/0yLn5bky/

I hope this will be helpful to you.

Answer 2

 /* bar bg */ .highcharts-series-1 rect:nth-child(1) { fill: #333; } /* text color above bar */ .highcharts-series-1 g:nth-child(1) text { fill: red !important; } /* x axis text colors */ .highcharts-xaxis-labels text:nth-child(1) { fill: green !important; } .highcharts-xaxis-labels text:nth-child(2) { fill: blue !important; } .highcharts-xaxis-labels text:nth-child(3) { fill: black !important; } .highcharts-xaxis-labels text:nth-child(4) { fill: pink !important; } 

CODEPEN