Highchart line renders bigger when exported to pdf using css2pdf

问题

I have a problem when i export my Highchart chart to pdf using css2pdf. Chart line gets bigger in pdf always, it doesnt mater if i set chart line width.

Here is the image of chart in html:
html chart

Here is the code for my chart:

Highcharts.chart('centersChartcontainer', {
        chart: {
            zoomType: 'xy'
        },

        title: {
            text: 'Centers'
        },
        subtitle: {
            text: 'Centers by year'
        },
        xAxis: [{
            categories: $scope.yearsECMOArray,

            labels: {
                interval: 1,
                rotation: 0,
                style: {
                    fontSize: '6px',
                    fontFamily: 'Verdana, sans-serif',

                }
                , y: 8

            }
        },
        {
            categories: $scope.countsECMOArray,
            linkedTo: 0,
            labels: {
                rotation: 0,
                style: {
                    fontSize: '6px',
                    fontFamily: 'Verdana, sans-serif'
                }
                , y: 8
            }

            , opposite: false
        },
        {
            categories: $scope.casesECMOArray,
            linkedTo: 0,
            labels: {
                rotation: 0,
                style: {
                    fontSize: '6px',
                    fontFamily: 'Verdana, sans-serif'
                }
                , y: 8
            }

            , opposite: false
        },

        {
            categories: $scope.casesECMOArray,
            linkedTo: 0,
            labels: {
                enabled: false
            }
        }

        ],
        yAxis: [{
            labels: {
                format: '{value}',
                style: {
                    color: Highcharts.getOptions().colors[3],
                    fontSize: '6px',
                    fontFamily: 'Verdana, sans-serif'
                }
            },
            title: {

                text: 'Cases',
                style: {
                    color: Highcharts.getOptions().colors[1],
                }
            },
            opposite: true

        }, {
            labels: {
                format: '{value}',
                style: {
                    color: Highcharts.getOptions().colors[3],
                    fontSize: '6px',
                    fontFamily: 'Verdana, sans-serif',
                    borderWidth: '3px'
                }
                ,borderWidth:4
            },
            title: {
                text: 'Counts',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            }

        }],
        plotOptions: {//This disables dots on spline
            spline: {
                marker: {
                    enabled: true
                },
               enableMouseTracking: false                  
            },
            series: {
                animation: false
            }
        },
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            x: 0,
            verticalAlign: 'bottom',
            y: -4.5,
            floating: true,
            itemStyle: {
                fontSize: '6px',
                font: 'Verdana, sans-serif',
                color: '#A0A0A0',

            },

        },

        series: [{
            name: 'Counts',
            type: 'column',
            yAxis: 1,
            data: $scope.countsECMOArray,
            color: '#9a0000'

        }, {
            name: 'Cases',
            type: 'spline',
            yAxis: 0,
            data: $scope.casesECMOArray,

            color: '#428bca',
            lineWidth: 0.5
        }]
    });

Here is the html side code related to chart and export link:

<div id="pdfContentHolder" style="margin:auto; width: 720px; height: 800px;"><div style="margin-top: 10px;" class="blackHeaderHolder">Centers</div>          
<div id="centersChartcontainer" style="min-width: 400px; height: 500px; max-width: 800px; margin: 0 auto"></div></div><a href="#" onclick="return xepOnline.Formatter.Format('pdfContentHolder',{render:'download'},{pageWidth:'216mm', pageHeight:'279mm'});">Export to Pdf</a>

If you take a look at last lines of chart i used lineWidth: 0.5 for line and it works on chart while in html. But in pdf line is still same size, big. If i increase this width it will also increase width in pdf too and it will be much bigger, also if i put 0 it will be presented as big line but transparent.

I updated chart code. It works now. If someone else has this problem in future like i did. Just add this property 'enableMouseTracking: false' and it will work.

shieldChart

回答1:

Well that's a strange one.

I would try adding the lineWidth setting in the exporting object as well.

Example:

exporting: {
    chartOptions: {
        plotOptions: {
            line: {
                lineWidth: 0.5
            }
        }
    }
}

Reference:

• http://api.highcharts.com/highcharts/exporting.chartOptions

来源：https://stackoverflow.com/questions/43804214/highchart-line-renders-bigger-when-exported-to-pdf-using-css2pdf