Clustered box-plot

This is a demo tutorial. While there is no step-by-step commentary available (yet), the live demo below is fully functional. Feel free to open it for full source code.

This demo shows how we can implement clustered box-plot chart with multiple columns per category/date.

The code

The box-plot chart in amCharts consists of these parts:

• A candlestick series which creates body of the box plot.
• A step line series to show a median threshold line over candles.

Candlestick series will automatically cluster itself if there are multiple series.

Step line series will need to do some tinkering, though.

The secret is to set stepWidth to 100 / seriesCount percent (50 in case there are two box plots).

If we'd have three, set it to 33. This will make the step to occupy only part of a cell.

Additionally, we'll need to set location (0.25 for the first and 0.75 for the second median series).

The location can be calculated using this formula: 1 / seriesCount * (seriesIndex + 1) - 1 / seriesCount / 2

So, if we'd have three box plots, locations will be 1/6, 1/2 and 5/6.

let medianaSeries = chart.series.push(
  am5xy.StepLineSeries.new(root, {
    stroke: root.interfaceColors.get("background"),
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "mediana",
    valueXField: "date",
    noRisers: true,
    stepWidth: am5.percent(50),
    locationX: 0.25
  })
);

var medianaSeries = chart.series.push(
  am5xy.StepLineSeries.new(root, {
    stroke: root.interfaceColors.get("background"),
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "mediana",
    valueXField: "date",
    noRisers: true,
    stepWidth: am5.percent(50),
    locationX: 0.25
  })
);

The demo

See the Pen
Multiple Box Plot Chart by amCharts team (@amcharts)
on CodePen.0