html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  var data = [

    {

        x: 'Backend Developer',

        low: 35000,

        q1: 60000,

        median: 70000,

        q3: 80000,

        high: 110000,

        outliers: [10001, 10001, 12000, 13000, 14400, 17500, 25000, 27000, 27000, 28000, 120000, 135000, 154000, 172000]

    },

    {

        x: 'Data Engineer',

        low: 40000,

        q1: 54000,

        median: 68000,

        q3: 84000,

        high: 110000,

        outliers: [200000]

    },

    {

        x: 'DevOps',

        low: 52500,

        q1: 65000,

        median: 72000,

        q3: 82500,

        high: 105000,

        outliers: [30000, 37000, 124000, 140000]

    },

    {

        x: 'Engineering Manager',

        low: 78000,

        q1: 80000,

        median: 85000,

        q3: 95750,

        high: 105000

    },

    {

        x: 'ML Engineer',

        low: 11500,

        q1: 52500,

        median: 65000,

        q3: 81000,

        high: 120000,

        outliers: [180000]

    },

    {

        x: 'Mobile Developer',

        low: 40000,

        q1: 61250,

        median: 66000,

        q3: 77000,

        high: 85000,

        outliers: [240000]

    },

    {

        x: 'Product Manager',

        low: 30000,

        q1: 60000,

        median: 70000,

        q3: 85000,

        high: 120000,

        outliers: [150000]

    },

    {

        x: 'Software Engineer',

        low: 28800,

        q1: 60000,

        median: 72000,

        q3: 81000,

        high: 110000,

        outliers: [14712, 16320, 21000, 21120, 24000, 26400, 113000, 115000, 120000, 120000, 120000, 120000, 120000, 120000, 130000, 130000, 140000, 150000, 151872, 160000, 200000, 250000]

    }

];

​

  // create a chart

  var chart = anychart.vertical();

​

  // create a box series and set the data

  var series = chart.box(data);

​

  // set the chart title

  chart.title('Yearly Gross Salary for Different IT Professions in Europe');

​

  // label the axes

  chart.xAxis().title('Salary');

  chart.yAxis().title('Position');

​

  // stagger the x-axis labels

  chart.xAxis().staggerMode(true);

  // configure the visual appearance of the series

  // change the color of the boxes

  series.normal().fill('#857AAA', 0.6);

  series.hovered().fill('#857AAA', 0.8);

  series.selected().fill('#857AAA', 2);

  series.normal().stroke('#4d495c', 1);

  series.hovered().stroke('#4d495c', 2);

  series.selected().stroke('#4d495c', 2);

  // configure the medians

  series.normal().medianStroke('#dd2c00', 2);

  series.hovered().medianStroke('#dd2c00', 2);

  series.selected().medianStroke('#dd2c00', 2);

  // configure the stems

  series.normal().stemStroke('#4d495c', 0.5);

  series.hovered().stemStroke('#4d495c', 1);

  series.selected().stemStroke('#4d495c', 2);

  // configure the whiskers

  series.whiskerWidth(20);

  series.normal().whiskerStroke('#4d495c', 0.5);

  series.hovered().whiskerStroke('#4d495c', 1);

  series.selected().whiskerStroke('#4d495c', 2);

  // configure the outliers

  series.normal().outlierMarkers({

    fill: '#857AAA 0.6',

    stroke: { color: '#4d495c', thickness: 1 },

    size: 5,

    type: 'star4'

  });

  series.hovered().outlierMarkers({

    fill: '#857AAA 0.2',

    stroke: { color: '#4d495c', thickness: 2 },

    size: 5,

    type: 'star4'

  });

  series.selected().outlierMarkers({

    fill: '#857AAA 0.6',

    stroke: { color: '#4d495c', thickness: 4 },

    size: 7.5,

    type: 'star4'

  });

  // configure the tooltip

  chart.tooltip().titleFormat('Profession: {%x}');

  chart.tooltip().format('Low: {%low} \n High: {%high} \n Q1: {%q1} \n Median: {%median} \n Q3: {%q3} \n  Outliers: {%outliers}');

​

  // set the container id

  chart.container('container');

  // draw the chart

  chart.draw();

​

});