Not able the hide content in of HTML page and show it at the time of print-CodePudding

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 >
  <div ><canvas id="resultsChart7"></canvas></div>
</div>

CSS:

.bar-chart {
  display: none;
}

@media print {
  body,
  html,
  #wrapper {
    width: 100%;
  }

  .bar-chart {
    display: block;
    visibility: visible;
  }
}

CodePudding user response：

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>

CodePudding user response：

you need to add javascript for that.