Taming Candlestick Series

Candlesticks are a good way to depict data dynamics using variety of metrics. Instead of single value - used on most series - candlesticks use four: open, high, low, and close. This tutorial will explain how to set up and configure Candlestick series.

Adding and setting up

Adding a CandlestickSeries is no different than adding any other series: you just push a new object into chart's series list.

What is different, though, is that instead of just two data fields, you need to set up five:

let series = chart.series.push(new am4charts.CandlestickSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "close";
series.dataFields.openValueY = "open";
series.dataFields.lowValueY = "low";
series.dataFields.highValueY = "high";

var series = chart.series.push(new am4charts.CandlestickSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "close";
series.dataFields.openValueY = "open";
series.dataFields.lowValueY = "low";
series.dataFields.highValueY = "high";

{
  // …
  "series": [{
    "type": "CandlestickSeries",
    "dataFields": {
      "dateX": "date",
      "valueY": "close",
      "openValueY": "open",
      "lowValueY": "low",
      "highValueY": "high"
    }
  }]
}

Let's see how it turned out:

See the Pen amCharts 4: Candlestick series by amCharts team (@amcharts) on CodePen.0

Configuring colors

Default coloring

As you can see in the above chart, candlesticks automatically come in two colors:

• If the open value is greater than close value, the color is red(ish) or "negative".
• If open value is lower than close, candlestick is colored in green indicating that value increased, or is "positive".

Where do those colors come from? From the theme.

Most of the themes will define what color is "positive" (green) and what is "negative" (red). Candlestick series will use those colors.

Can you override them? Yes.

Using custom colors

When you create a Candlestick series, it automatically creates two states on their columns.template: "dropFromOpenState" and "riseFromOpenState".

They are both accessible by equally named properties.

SIDE READING Not sure what "states" are? Check out our "Sates" article.

By default "dropFromOpenState" uses theme's "negative" color, while "riseFromOpenState" uses "positive" color.

To change those colors, all we need to do is to modify those readily available themes:

series.dropFromOpenState.properties.fill = am4core.color("#8F3985");
series.dropFromOpenState.properties.stroke = am4core.color("#8F3985");

series.riseFromOpenState.properties.fill = am4core.color("#07BEB8");
series.riseFromOpenState.properties.stroke = am4core.color("#07BEB8");

series.dropFromOpenState.properties.fill = am4core.color("#8F3985");
series.dropFromOpenState.properties.stroke = am4core.color("#8F3985");

series.riseFromOpenState.properties.fill = am4core.color("#07BEB8");
series.riseFromOpenState.properties.stroke = am4core.color("#07BEB8");

{
  // …
  "series": [{
    // …
    "dropFromOpenState": {
      "properties": {
        "fill": "#8F3985",
        "drop": "#8F3985"
      }
    },
    "riseFromOpenState": {
      "properties": {
        "fill": "#07BEB8",
        "drop": "#07BEB8"
      }
    }
  }]
}

See the Pen amCharts 4: Candlestick series by amCharts team (@amcharts) on CodePen.0

NOTE You are not limited to just colors. You can modify any visual property (opacity, strokeWidth, etc.) for each state.

Professional candlesticks

So far we have been dealing with basic two-colored candlesticks.

In dataviz, especially financial circles, there's a notion of "professional candlesticks".

Besides regular rise/drop (positive/negative) coloring, it also introduces fill opacity dimension.

If candlestick's close value is higher than the close value of the candlestick that went before it, it is filled with solid color.

If close value is lower than the previous close value, the fill is completely transparent, or white/black.

To make that work, Candlestick series introduces two additional states: "riseFromPreviousState" and "dropFromPreviousState".

To apply the logic described above, we are going to modify fillOpacity for those states.

series.riseFromPreviousState.properties.fillOpacity = 1;
series.dropFromPreviousState.properties.fillOpacity = 0;

series.riseFromPreviousState.properties.fillOpacity = 1;
series.dropFromPreviousState.properties.fillOpacity = 0;

{
  // …
  "series": [{
    // …
    "riseFromPreviousState": {
      "properties": {
        "fillOpacity": 1
      }
    },
    "dropFromPreviousState": {
      "properties": {
        "fillOpacity": 0
      }
    }
  }]
}

See the Pen amCharts 4: Candlestick series by amCharts team (@amcharts) on CodePen.0

Candlesetick series and Legend

Candlestick series is intelligent enough to take into account open and end value from the whole data when determining the color of legend marker. It will also color the marker to the one currently hovered by an XYCursor.

However the text portion of the legend item will always remain the same color: black by default.

If we'd like to color the label accordingly as well, we could could use label text inline formatting together with placeholders accessing color of related columns. We can use series' legendSettings for that (more info).

series.legendSettings.labelText = "[{column.fill}]Open: ${valueY.open} Low: ${valueY.low} High: ${valueY.high} Close: ${valueY.close}[/]";
series.legendSettings.itemLabelText = "[{column.fill}]Open: ${openValueY.value} Low: ${lowValueY.value} High: ${highValueY.value} Close: ${valueY.value}[/]";

series.legendSettings.labelText = "[{column.fill}]Open: ${valueY.open} Low: ${valueY.low} High: ${valueY.high} Close: ${valueY.close}[/]";
series.legendSettings.itemLabelText = "[{column.fill}]Open: ${openValueY.value} Low: ${lowValueY.value} High: ${highValueY.value} Close: ${valueY.value}[/]";

{
  // ...
  "series": [{
    // ...
    "legendSettings": {
      "labelText": "[{column.fill}]Open: ${valueY.open} Low: ${valueY.low} High: ${valueY.high} Close: ${valueY.close}[/]",
      "itemLabelText": "[{column.fill}]Open: ${openValueY.value} Low: ${lowValueY.value} High: ${highValueY.value} Close: ${valueY.value}[/]"
    }
  }]
}

Working example:

See the Pen amCharts 4: Candlestick series by amCharts team (@amcharts) on CodePen.24419