Please try the following code:

<script src=".js"></script>

<div id="container" style="height: 400px"></div>

and

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        series: [{
          data: [194.1, 95.6, {y:54.4,color:'#FF0000'}]
        }]
    });
});

or run it in jfiddle.

HighCharts colors the last bar in red. Now if you change the chart type from 'column' to 'scatter', you will see that HighCharts does not color the last marker but its tooltip.

How can I make HighCharts color a specific point in a scatterplot?

Please try the following code:

<script src="http://code.highcharts./highcharts.js"></script>

<div id="container" style="height: 400px"></div>

and

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        series: [{
          data: [194.1, 95.6, {y:54.4,color:'#FF0000'}]
        }]
    });
});

or run it in jfiddle.

HighCharts colors the last bar in red. Now if you change the chart type from 'column' to 'scatter', you will see that HighCharts does not color the last marker but its tooltip.

How can I make HighCharts color a specific point in a scatterplot?

• javascript
• charts
• highcharts

2 Answers 2

Set the "fillColor", instead of (or as well as) the "color":

series: [{
  data: [194.1, 95.6, {y:54.4, fillColor:'#FF0000'}]
}]

http://jsfiddle/Uu9ck/1/

You don't need to set fillColor. color works, just like in your example, if you set the series type to scatter (as opposed to the chart type):

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
        },
        series: [{
          type: 'scatter',  // <- this
          data: [194.1, 95.6, { y:54.4, color:'#FF0000' }]
        }]
    });
});

Here's the fiddle.