JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div class="row">
   <div class="col-xs-12">
     <div class="box-first box-container">
       <div class="row">
         <div class="col-xs-4">
          <input type="checkbox" name="One" value="One" checked> One
         </div>
         <div class="col-xs-4">
          <input type="checkbox" name="Two" value="Two" checked> Two
         </div>
         <div class="col-xs-4"> 
           <input type="checkbox" name="Three" value="Three" checked> Three
         </div>
       </div>
      </div>
   </div>
</div>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

JavaScript

var json_data = [
  {
    "mip": {
      "id": 125,
      "name": "One",
      "code": "One"
    },
    "briefNetSpendInEuro": 2200,
    "postNetSpendInEuro": 0,
    "proposalSpendInEuro": 3530
  },
  {
    "mip": {
      "id": 125,
      "name": "Two",
      "code": "Two"
    },
    "briefNetSpendInEuro": 12052,
    "postNetSpendInEuro": 2516,
    "proposalSpendInEuro": 5358
  },
  {
    "mip": {
      "id": 531,
      "name": "Three",
      "code": "Three"
    },
    "briefNetSpendInEuro": 5391,
    "postNetSpendInEuro": 9812,
    "proposalSpendInEuro": null
  }
]

var categories = [];
var series = [];
var brief = [];
var post = [];
var proposal = [];

json_data.forEach(function(element) {
  categories.push(element.mip.code);
  brief.push(element.briefNetSpendInEuro || 0);
  post.push(element.postNetSpendInEuro || 0);
  proposal.push(element.proposalSpendInEuro || 0);
});

const calcData = (arr) => {
  
  const brief = [];
  const proposal = [];
  const post = [];
  
  json_data.forEach((element, i) => {
  	
    if (arr.includes(i)) {
      
      brief.push(element.briefNetSpendInEuro || 0);
      post.push(element.postNetSpendInEuro || 0);
      proposal.push(element.proposalSpendInEuro || 0);
  	}
  });
  
  return [{ name: 'Brief Net', data: brief }, 
  				{ name: 'Post Net', data: post },
          { name: 'Proposal', data: proposal }];
};

$(function() {
  var chart = new Highcharts.Chart('container', {
    chart: {
      type: 'column'
    },
    title: {
      text: 'Spend per Media Group'
    },
    xAxis: {
      categories: [{
        "class": "One",
        "name": "One"
      }, {
        "class": "Two",
        "name": "Two"
      }, {
        "class": "Three",
        "name": "Three"
      }],
      labels: {
        formatter: function() {
          return this.value.name;
        },
        useHTML: true
      }
    },
      yAxis: {
          min: 0,
          title: {
              text: 'Spend (EUR)'
          }
      },
    tooltip: {
    ...