1
Grundsätzlich habe ich einen Container in col-xs-3, col-xs-7 (die das Diagramm enthält) und col-xs-2, und auch drei Tabellen darunter mit den gleichen Bootstrap-Klassen (col-xs- 3,...). Auf dem Container habe ich ein Diagramm mit Highcharts erstellt, und ich möchte, dass es mit der darunter liegenden Tabelle ausgerichtet ist (wie durch lila Pfeile angezeigt), was ich als Ergebnis will, und auch reagieren, wenn Fensterbreite ändert: 
Wie kann ich eine ansprechende Grafik mit Highcharts haben?
im Moment habe ich es so:
ich habe bereits versucht, einige approches wie die Grafik nach links bewegt, die Grafik auf verschiedenen Medien-Anfragen skalieren, aber diese funktionieren nur auf einige bestimmte Breite.
Highcharts.chart('container', {
chart: {
renderTo: ''
},
title: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
lineWidth: 0,
minorTickLength: 0,
tickLength: 0,
labels: {
rotation: -45,
enabled: false
},
//maxZoom: 24 * 3600 * 1000 * 30, // fourteen days
title: {
//text: 'sample'
}
},
yAxis: {
min: 0,
max: 150,
tickInterval: 50,
gridLineWidth: 0,
lineWidth: 4,
plotLines: [{
color: '#ccc',
dashStyle: 'dash',
width: 2,
value: 100
}],
title: {
text: ''
},
labels: {
style: {
color: '#ccc'
},
formatter: function() {
if ('100' == this.value) {
return '<span style="fill: #000;">' + this.value + ' %</span>';
} else {
return this.value + ' %';
}
}
}
},
tooltip: {
shared: true,
formatter: function() {
var result = '<b>' + Highcharts.dateFormat('%b %e, %Y', this.x) + '</b>';
$.each(this.points, function (i, datum) {
result += '<br />' + Math.round(datum.y) + ' %';
});
return result;
}
},
legend: {
enabled: false,
},
plotOptions: {
line: {
marker: {
enabled: false
}
}
},
series: [{
name: '',
data: [[0, 50.57],
[10, 50.63],
[20, 75.14],
[30, 100.08],
[40, 40.28],
[130, 68.25],
[140, 125.01], ],
lineWidth: 5,
threshold: 99,
step: 'center',
tooltip: {
valueDecimals: 2
}
}]
});.empty {
background-color: #f3f3f3;
height: 250px;
}
.row {
margin: 10px 0;
}<script src="https://code.highcharts.com/highcharts.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-3 empty"></div>
<div class="col-xs-7" style="">
<div id="container" style="height: 250px; width: 100%"></div>
</div>
<div class="col-xs-2 empty"></div>
</div>
<div class="row">
<div class="col-xs-3 empty"></div>
<div class="col-xs-7" style="">
<div id=""></div>
</div>
<div class="col-xs-2 empty"></div>
</div>
</div>ist hier ein jsfiddle of my code