Hi I try to hide one of the chart from main page and want to show it at the time of print.But it is not working for me.
HTML:
<div class="bar-chart">
<div class="canvas-holder3"><canvas id="resultsChart7"></canvas></div>
</div>
CSS:
.bar-chart {
display: none;
}
@media print {
body,
html,
#wrapper {
width: 100%;
}
.bar-chart {
display: block;
visibility: visible;
}
}
It's working fine like this. you can just follow this pattern.
<!DOCTYPE html>
<html>
<head>
<title>Show element at print</title>
<style>
body {
text-align:center;
}
h1 {
color:green;
}
.print {
display: none;
}
@media print {
.print {
display: block;
}
}
</style>
</head>
<body>
<h1 class = "print">This section would not appear on screen but only in print.</h1>
<p>Show something during print.</p>
</body>
</html>