Automatic Coloring

• Overview
• Negative Positive Threshold
  • Baseline
• Rising Falling
• Coloring Functions

Overview

AnyChart provide a lot of ways to color series and points. This article is dedicated to automatic ways to handle some specific cases for different chart and series type.

Negative Positive Threshold

Coloring negative and positive parts of the chart in AnyChart can be easily done using negativeStroke(), negativeFill(), and negativeHatchFill() methods.

For example, for line series you can define basic and negative stroke:

var chart = anychart.line();

// create line series
line = chart.line(data.mapAs({x: 0, value: 1}));
// set positive and negative stroke settings
line.stroke("#3ba158", 2, "2 2");
line.negativeStroke("2 #fa6b71");

In the next sample you can find area and line series with custom negative and positive colors:

Baseline

You can customize the thresholds where positive turns to negative using the baseline() method. In the following sample baseline is set to custom value from the start and you can use slider to change it on-the-fly.

Notice that we are dealing with AnyStock here and everything works just the same way.

Rising Falling

You can configure Rising and Falling colors for easier tracking the trend chart follows, it is done using risingStroke(), risingFill(), risingHatchFill(), fallingStroke(), fallingFill(), and fallingHatchFill() methods.

These methods can be applied to OHLC, Candlestick, as well as Lines, Splines, and others, even Columns or Stick.

// set rising / falling colors
series.risingStroke('#3ba158');
series.risingFill('#3ba158');

series.fallingStroke('#fa6b71');
series.fallingFill('#fa6b71');

Take a look at the sample and change the series type to see how it works:

Coloring Functions

If you want to color points depending on the value in your completely own way you can set color as functions and use values as the way to decide what the color should be.

Here is a sample of column chart that does that for column chart:

// create a series
series = chart.column(data);

// set custom coloring functions
series.fill(coloringFunction);

// custom coloring function
function coloringFunction() {

  // color the maximal value
  if (this.value == this.series.getStat('seriesMax')) return '#94353C';

  // color elements depending on the argument
  var x = this.x;
  if  ((x == 'Jan') || (x == 'Feb') || (x == 'Dec')) return '#B2E3E8';
  if  ((x == 'Jul') || (x == 'Jun') || (x == 'Aug')) return '#D94330';

  // get the default otherwise
  return this.sourceColor;
}