From Aug 01 to Aug 10Use left and right arrows to move selectionFrom Aug 01Use left and right arrows to move left selectionTo Aug 10Use left and right arrows to move right selectionUse TAB to select grip buttons or left and right arrows to change selection100%Chart created using amCharts library
  • Open in:

Box plot chart

Box plot chart (also know as boxplot, box-and-whisker plot, box-and-whisker diagram) is a way of displaying statistical data based on five numbers: minimum, first quartile (25th percent), median, third quartile (75th percent) and maximum.

Demo source

<!-- Styles -->
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}
</style>

<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>

<!-- Chart code -->
<script>
am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.paddingRight = 20;

chart.dateFormatter.inputDateFormat = "yyyy-MM-dd";

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 40;
dateAxis.renderer.grid.template.location = 0;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;

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.simplifiedProcessing = true;
series.tooltipText = "Open:${openValueY.value}\nLow:${lowValueY.value}\nHigh:${highValueY.value}\nClose:${valueY.value}\nMediana:{mediana}";
series.riseFromOpenState = undefined;
series.dropFromOpenState = undefined;

chart.cursor = new am4charts.XYCursor();

var medianaSeries = chart.series.push(new am4charts.StepLineSeries());
medianaSeries.noRisers = true;
medianaSeries.startLocation = 0.1;
medianaSeries.endLocation = 0.9;
medianaSeries.dataFields.valueY = "mediana";
medianaSeries.dataFields.dateX = "date";
medianaSeries.strokeWidth = 2;
medianaSeries.stroke = am4core.color("#fff");


var topSeries = chart.series.push(new am4charts.StepLineSeries());
topSeries.noRisers = true;
topSeries.startLocation = 0.2;
topSeries.endLocation = 0.8;
topSeries.dataFields.valueY = "high";
topSeries.dataFields.dateX = "date";
topSeries.stroke = chart.colors.getIndex(0);
topSeries.strokeWidth = 2;

var bottomSeries = chart.series.push(new am4charts.StepLineSeries());
bottomSeries.noRisers = true;
bottomSeries.startLocation = 0.2;
bottomSeries.endLocation = 0.8;
bottomSeries.dataFields.valueY = "low";
bottomSeries.dataFields.dateX = "date";
bottomSeries.stroke = chart.colors.getIndex(0);
bottomSeries.strokeWidth = 2;


chart.scrollbarX = new am4core.Scrollbar();

chart.data = [ {
    "date": "2019-08-01",
    "open": 132.3,
    "high": 136.96,
    "low": 131.15,
    "close": 136.49
  }, {
    "date": "2019-08-02",
    "open": 135.26,
    "high": 135.95,
    "low": 131.50,
    "close": 131.85
  }, {
    "date": "2019-08-03",
    "open": 129.90,
    "high": 133.27,
    "low": 128.30,
    "close": 132.25
  }, {
    "date": "2019-08-04",
    "open": 132.94,
    "high": 136.24,
    "low": 132.63,
    "close": 135.03
  }, {
    "date": "2019-08-05",
    "open": 136.76,
    "high": 137.86,
    "low": 132.00,
    "close": 134.01
  }, {
    "date": "2019-08-06",
    "open": 131.11,
    "high": 133.00,
    "low": 125.09,
    "close": 126.39
  }, {
    "date": "2019-08-07",
    "open": 130.11,
    "high": 133.00,
    "low": 125.09,
    "close": 127.39
  }, {
    "date": "2019-08-08",
    "open": 125.11,
    "high": 126.00,
    "low": 121.09,
    "close": 122.39
  }, {
    "date": "2019-08-09",
    "open": 131.11,
    "high": 133.00,
    "low": 122.09,
    "close": 124.39
  }];

  addMediana();

  function addMediana(){
  	for(var i = 0; i < chart.data.length; i++){
  		var dataItem = chart.data[i];
  		dataItem.mediana = Number(dataItem.low) + (Number(dataItem.high) - Number(dataItem.low)) / 2;
  	}
  }

}); // end am4core.ready()
</script>

<!-- HTML -->
<div id="chartdiv"></div>