Issues using printThis with charts and table colors

Question

I'm using the printThis plugin to print a series of elements on my website.

One of the issues I've encountered is the following: I have a fairly wide chart that takes up a large portion of the screen. When using printThis to print it, much of it gets cut off because the width of the page where the elements are printed is narrower than the width of the screen where the chart is displayed.

This is what I see on my monitor: chart on my monitor

And this is what I see on the preview when I try to print: chart on print preview

The only way to properly view the chart (i.e., shrink it) is to either reduce the size of the browser window or select horizontal print mode.

Obviously, I can't expect the client to resize the window. I've tried displaying the default print in horizontal mode, and yet, on my 2560x1440 monitor, a little bit of the graph still gets cut off (it looks fine on my other 1920x1080 screen).

The other issue I have is that certain styles and colors (especially in tables) are not printed.

I have seen in the documentation that, by default, browsers do not print backgrounds to save ink. It is noted that the property -webkit-print-color-adjust can be used to force printing the background. Tables are more inconsistent, and it suggests adding a div to the table cell and styling that div.

I tried including the -webkit-print-color-adjust property within @media print: -webkit-print-color-adjust property

I managed to add color to some elements by simply copying background-color or color properties and adding them to the css file I am using with printThis but it was impossible to do so with tables.

this is a table on my website: table on the website

It went from not having any style (background was completly white) to this: table on print preview

just a bit color on the first row, but nothing else. When I try to add background-color to any row o cell, it does not work.

So i've got two questions:

1. Is there any way I can take the wide graph, narrow it down, and place it in the document I want to print? Whether it's using printThis or directly with CSS or JS.

2. How can I give background to the tables?

The CSS I'm using with printThis:

/*Para evitar que se vean los headers y browsers añadidos por el navegador*/
@media print {
    @page {
         margin: 0;
         size: landscape;
    }

    body {
        -webkit-print-color-adjust: exact;
        padding: 50px;
    }

}


/* Estilos para imprimir JurimetriaV2 */

/* Número de sentencias */
#pestanias {
    text-align: right;

}
    #pestanias .cantidad {
        font-size: 24px;
        color: #007ac3;
    }

    #pestanias .titulo {
        float: right;
        padding-left: 8px;
    }

/* Resoluciones judiciales por año */
#JcasoYear {
    margin-top: 50px;
}

#resultControlContainerLink {
    padding-top: 20px;
    border: 2px solid black;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}

#Chart_JcasoTribunal_container-chart, #Chart_JcasoProcedimiento-legend,
#Chart_JcasoFallo-legend, #Chart_JcasoContra-legend, #Chart_JcasoPonente_container-chart, #JcasoTribunal {
    break-after: page;
}

.JcasoFavorContra_Container {
    break-after: avoid;
}

#Chart_JcasoProcedimiento-container, #Chart_JcasoFallo-container, #Chart_JcasoFavor-container, #Chart_JcasoContra-container {
    height: auto;
    max-height: 400px;
}


/*Estilos para imprimir InicioJuri*/

/*Mapa. "Nacional - Todos los Tribunales" */
#FirstMapTitle_CongestionDetail {
    margin-top: 10px;
    font-size: 30px;
    font-weight: bold;
}

#FirstMap_CongestionDetail {
    float: left;
    position: relative;
    left: 20%;
}

/*Toda la leyenda del mapa*/
#maplegendContainer {
    float: left;
    position: relative;
    left: 26%;
    margin-top: 35em;
}

/*Estilos de cada intervalo en la leyenda del mapa*/
.legendBox {
    margin-left: 2vw;
    margin-right: 0.4vw;
}

#legendData-0 {
    border: 2px solid rgb(140, 188, 211);
}

#legendData-1 {
    border: 2px solid rgb(111, 154, 180);
}

#legendData-2 {
    border: 2px solid rgb(81, 120, 147);
}

#legendData-3 {
    border: 2px solid rgb(52, 85, 115);
}

/*Duración media del proceso*/
#MapDetail {
    margin-top: 46em;
}

.literal-title {
    text-align: center;
}

.map-definition {
    break-after: page;
}


/*Tabla duración media del proceso*/
.literal-list {
    text-align: center;
}

.table-title {
    background-color: #88B1C0;
    color: red;
    font-size: 1em;
}


/*Gráfico duración media del proceso*/
#Chart_CompTasa1_container-chart {
    text-align: center;
}

/*Margen para los headers de los gráficos "Tipo de resoluciones judiciales" */
#Chart_TipoRes_4_2-container-title, #Chart_TipoRes_4_4-container-title {
    margin-top: 400px;
}

/*Gráficos "Tipo de resoluciones judiciales"*/

#tipoRes {
    margin-top: 8em;

}

#Chart_TipoRes_4_1-container
#Chart_TipoRes_4_1-container, #Chart_TipoRes_4_2-container, #Chart_TipoRes_4_3-container, #Chart_TipoRes_4_4-container {
    float: left;
    left: 2vw;
    height: auto;
    max-height: 250px;
    break-after: column;
}


/*Leyendas de gráficos "Tipo de resoluciones judiciales*/
#LegendTipoRes_4_1, #LegendTipoRes_4_2, #LegendTipoRes_4_3, #LegendTipoRes_4_4 {
    left: 50vw;
    top: 100px;
}

#LegendTipoRes_4_2, #LegendTipoRes_4_4 {
    break-after: page;
}

#AsunIngresados, #AsunResueltos {
    max-width: 400px;
}

#AsunResueltos {
    float: left;
    position: relative;
    top: 800px;
    right: 400px;
    break-after:page;
}



.table-title {
    padding: 7px 7px !important;
    text-align: center !important;
    font-size: 16px;
    font-weight: bold;
}

And this is how I invoque the printThis function:

$(elementsJoined).printThis({
    loadCSS: cssContent,
    afterPrint: function() {
        if (typeof callback === 'function') {
            callback();
        }
    }
});