CSS Media Print Query

Question

I have a working @media print query in modal . Then I added a chart that has also a PRINT functionality. When I tried the PRINT in chart, it is not displaying anything in Chrome Print Dialog. I am thinking that because of the @media print .

How can I add same functionality of modal in my chart ?

CSS Media Print:

@media print {
  @page {
    size: auto; 
    margin: 3mm;
    margin-right: 57mm;
    margin-left: 57mm
  }

  body * {
    visibility: hidden;
  }
  #admissionSlip * {
    visibility: visible;
    overflow: visible;
  }
  #chart * {
    visibility: visible;
    overflow: visible;
  }
  #mainPage * {
    display: none;
  }
  #printBtn {
    display: none;
  }
  .modal {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    min-height: 550px;
    visibility: visible;
    /**Remove scrollbar for printing.**/
    overflow: visible !important;
  }
  .modal-dialog {
    visibility: visible !important;
    /**Remove scrollbar for printing.**/
    overflow: visible !important;
  }
  li {
    page-break-after: auto;
  }

  /* Chart */

  .panel {
    visibility: visible !important;
    /**Remove scrollbar for printing.**/
    overflow: visible !important;
  }
}

Answer 1

I solved it by not so good idea, but it did what I need.

I separate the css file of media print of chart and modal and reference it on each html file.

I know that it is not a good idea and that's probably not a best practice but it did what I needed. Thanks.