CODEWITHSUNDEEP
javascriptchartshighcharts
tic
tic

Reputation: 4189

Individual point color in highcharts scatterplot

Please try the following code:

<script src="http://code.highcharts.com/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?

Upvotes: 3

Views: 6740

Answers (2)

Dan Dascalescu
Dan Dascalescu

Reputation: 151916

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.

Upvotes: 2

StuR
StuR

Reputation: 12218

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

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

http://jsfiddle.net/Uu9ck/1/

Upvotes: 4

Related Questions