@media all and (max-width: 800px) {
/*Charts*/
.chart-1 {
width: 100%;
margin-bottom: 20px;
margin-left: 5%;
box-shadow: -1px 3px 3px 3px rgb(167,167,167);
float: left;
}
.chart-2 {
width: 100%;
margin-bottom: 20px;
margin-left: 5%;
box-shadow: -1px 3px 3px 3px rgb(167,167,167);
float: left;
}
.chart-3 {
width: 100%;
margin-bottom: 20px;
margin-left: 5%;
box-shadow: -1px 3px 3px 3px rgb(167,167,167);
float: left;
}
.chart-4 {
width: 100%;
margin-bottom: 20px;
margin-left: 5%;
box-shadow: -1px 3px 3px 3px rgb(167,167,167);
float: left;
}
.cg-chart-1 {
width: 90%;
height: 90%;
}
.cg-chart-2 {
width: 90%;
height: 90%;
}
.cg-chart-3 {
width: 90%;
height: 90%;
}
.cg-chart-4 {
width: 90%;
height: 90%;
}
}
.chart-1 {
width: 620px;
height: 400px;
margin: 0 auto;
margin-left: 5%;
box-shadow: -1px 3px 3px 3px rgb(167,167,167);
float: left;
}
.chart-2 {
width: 420px;
height: 400px;
margin: 0 auto;
margin-left: 2%;
box-shadow: -1px 3px 3px 3px rgb(167,167,167);
float: left;
}
.chart-3 {
width: 600px;
height: 400px;
margin: 0 auto;
margin-left: 2%;
box-shadow: -1px 3px 3px 3px rgb(167,167,167);
float: left;
}
.chart-4 {
width: 1717px;
height: 400px;
margin: 0 auto;
margin-left: 5%;
box-shadow: -1px 3px 3px 3px rgb(167,167,167);
float: left;
margin-top: 50px;
} <script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<body class="body">
<div class="cg-chart-1"><div id="container-chart-1" class="chart-1"></div></div>
<!--Container do Gráfico 2-->
<div class="cg-chart-2"><div id="container-chart-2" class="chart-2"></div></div>
<!--Container do Gráfico 3-->
<div class="cg-chart-3"><div id="container-chart-3" class="chart-3"></div></div>
<!--Container do Gráfico 4-->
<div class="cg-chart-4"><div id="container-chart-4" class="chart-4"></div></div>
<!--Gráfico 1-->
<script>
Highcharts.chart('container-chart-1', {
chart: {
type: 'bar'
},
title: {
text: 'RANKING VENDEDORES'
},
subtitle: {
text: 'Receita'
},
xAxis: {
categories: ['Maria', 'José', 'Rogério', 'Ricardo', 'Michelle'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'R$',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Junho 2017',
data: [107, 31, 635, 203, 2]
}, {
name: 'Julho 2017',
data: [133, 156, 947, 408, 6]
}, {
name: 'Agosto 2017',
data: [1052, 954, 4250, 740, 38]
}]
});
</script>
<!--Gráfico 2-->
<script>
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '50%'],
size: '80%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'circle'
}
},
tooltip: {
enabled: false
},
yAxis: {
stops: [
[0.1, '#7CB5EC']
],
lineWidth: 0,
minorTickInterval: null,
tickAmount: 2,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
var chartSpeed = Highcharts.chart('container-chart-2', Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 200,
title: {
text: ''
}
},
credits: {
enabled: false
},
series: [{
name: '',
data: [80],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver"></span></div>'
}
}]
}));
</script>
<!--Gráfico 3-->
<script>
Highcharts.chart('container-chart-3', {
chart: {
type: 'pie'
},
title: {
text: 'SITUAÇÃO CLIENTES'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
}
}
},
series: [{
name: 'Clientes',
colorByPoint: true,
data: [{
name: 'INATIVOS',
y: 45
}, {
name: 'POSITIVADOS',
y: 23
}, {
name: 'ATIVOS',
y: 32
}]
}]
});
</script>
<!--Gráfico 4-->
<script>
Highcharts.chart('container-chart-4', {
chart: {
type: 'line'
},
title: {
text: 'Resultado Diário'
},
subtitle: {
text: 'Mês Atual'
},
xAxis: {
categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30']
},
yAxis: {
title: {
text: 'Percentual Atingido'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'RECEITA',
data: [79.02, 122.81, 119.52, 32.77, 121.14, 128.59, 153.65, 110.51, 143.37, 109.86, 8.86, 120.25, 136.49, 163.17, 90.46]
}, {
name: 'VOLUME',
data: [68.79, 106.65, 98.35, 28.62, 101.19, 102.13, 121.39, 85.31, 111.32, 84.88, 20.44, 88.41, 105.23, 131.66, 71.81]
}, {
name: 'POSITIVAÇÃO',
data: [27.60, 38.10, 68.70, 15.60, 45.60, 72.30, 71.40, 75.30, 59.40, 61.20, 3, 51.60, 73.50, 61.80, 46.50]
}]
});
</script>
</body>I have a screen with 4 charts. The 3 first ones are suposed to be side by side as long as the screen can show them like that. Otherwise, them all are shown under each other with a 100% width.
This is my HTML for the charts:
<!--Container do Gráfico 1-->
<div class="cg-chart-1"><div id="container-chart-1" class="chart-1"></div></div>
<!--Container do Gráfico 2-->
<div class="cg-chart-2"><div id="container-chart-2" class="chart-2"></div></div>
<!--Container do Gráfico 3-->
<div class="cg-chart-3"><div id="container-chart-3" class="chart-3"></div></div>
<!--Container do Gráfico 4-->
<div class="cg-chart-4"><div id="container-chart-4" class="chart-4"></div></div>
And this is the CSS code:
.chart-1 {
width: 620px;
height: 400px;
margin: 0 auto;
margin-left: 5%;
box-shadow: -1px 3px 3px 3px rgb(167,167,167);
float: left;
}
.chart-2 {
width: 420px;
height: 400px;
margin: 0 auto;
margin-left: 2%;
box-shadow: -1px 3px 3px 3px rgb(167,167,167);
float: left;
}
.chart-3 {
width: 600px;
height: 400px;
margin: 0 auto;
margin-left: 2%;
box-shadow: -1px 3px 3px 3px rgb(167,167,167);
float: left;
}
.chart-4 {
width: 1717px;
height: 400px;
margin: 0 auto;
margin-left: 5%;
box-shadow: -1px 3px 3px 3px rgb(167,167,167);
float: left;
margin-top: 50px;
}
And I get something like this. Which is fine, but when the screen get smaller I want it to be something like this. To do it, I have this CSS:
.chart-1 {
width: 100%;
margin-bottom: 20px;
margin-left: 5%;
box-shadow: -1px 3px 3px 3px rgb(167,167,167);
float: left;
}
.chart-2 {
width: 100%;
margin-bottom: 20px;
margin-left: 5%;
box-shadow: -1px 3px 3px 3px rgb(167,167,167);
float: left;
}
.chart-3 {
width: 100%;
margin-bottom: 20px;
margin-left: 5%;
box-shadow: -1px 3px 3px 3px rgb(167,167,167);
float: left;
}
.chart-4 {
width: 100%;
margin-bottom: 20px;
margin-left: 5%;
box-shadow: -1px 3px 3px 3px rgb(167,167,167);
float: left;
}
.cg-chart-1 {
width: 90%;
height: 90%;
}
.cg-chart-2 {
width: 90%;
height: 90%;
}
.cg-chart-3 {
width: 90%;
height: 90%;
}
.cg-chart-4 {
width: 90%;
height: 90%;
}
And it also works properly. Both codes get me what I want, but the media query I'm using does not change the chart's properties. I'm currently using:
@media (max-width: 1200px) {/*Code for the charts*/}
Why does the media query does not change the CSS for my charts? I must say this is the first time I use media query. Thanks in advance.
EDIT: The snippet follows with the all code for the charts. Note that if you remove the css inside the media query and replace with the actual CSS for the charts, both of them works correctly. It's only the media query that's somehow bugged.
I think the problem is the order of rules. Try putting general rules first and then media queries rules under it. Right now the bottom rules are overriding rules you've put in media queries earlier.