Transform scale issue

by kzoon

HTML

<script src="http://github.highcharts.com/highcharts.js"></script>


<div id="outerContainer">
  <div id="innerContainer"></div>
</div>

CSS

#outerContainer {
  height: 600px;
  width: 800px;
  border-style: solid;
  transform: scale(0.5);
}

#innerContainer {
  height: 600px;
  width: 800px;
  background-color: green;
}

JavaScript

Highcharts.chart('innerContainer', {
  chart: {
    width: 800,
    backgroundColor: '#FCFFC5'
  },
  xAxis: {
    categories: ['Apples', 'Pears', 'Bananas', 'Oranges']
  },
  series: [{
    data: [1, 4, 3, 5],
    type: 'column'
  }]
});