CODEWITHSUNDEEP
javascripthighcharts
Viraj
Viraj

Reputation: 797

Image not exporting correctly in highcharts

I am trying to export a column chart as a JPEG but it does not export correctly.

I think the dimensions of the image need to be changed. Also, there is some unwanted text next to the first column(Manhattan). That too seems like an error.

Here is the exported image: Exported Image

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Percentage 311 calls pertaining to rats/mice in NYC within 1 block from restaurant</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

        <style type="text/css">
${demo.css}
        </style>
        <script type="text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Percentage 311 calls pertaining to rats/mice in NYC within 1 block from restaurant'
        },
        subtitle: {
            text: 'Source: NYC Open DataSet'
        },
        xAxis: {
            type: 'category',
            labels: {
                rotation: 0,
                style: {
                    fontSize: '13px'
                }
            }
        },
        data: {
            csv: document.getElementById('csv').innerHTML
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Percentage'
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            pointFormat: 'Percentage: <b>{point.y:.2f}%</b>'
        },
        plotOptions: {
            column: {
                grouping: false,
                dataLabels: {
                    enabled: true,
                    rotation: -90,
                    align: 'right',
                    color: '#FFFFFF',
                    format: '{point.y:.2f}', // one decimal
                    y: 10, // 10 pixels down from the top
                    style: {
                        fontSize: '13px',
                    }
                }   
            }        
        }
    });
});
        </script>
    </head>
    <body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<script src="../../js/modules/data.js"></script>
<script src="../../js/themes/dark-unica.js"></script>
<div id="container" style="min-width: 300px; max-width: 900px; height: 400px; margin: 0 auto"></div>
<pre id="csv" style="display:none">
BOROUGH
Manhattan,50.74
Queens,,25.31
Bronx,,,49.68
Brooklyn,,,,33.28
Staten Island,,,,,39.45
</pre>
    </body>
</html>

JSFiddle

Upvotes: 0

Views: 1129

Answers (1)

Raein Hashemi
Raein Hashemi

Reputation: 3384

For the theme you can use something like this:

Highcharts.theme = {
    colors: ["#2b908f", "#90ee7e", "#f45b5b", "#7798BF", ...],

    chart: {
              backgroundColor: {...}
              ...
    },

    style: {

              fontFamily: "sans-serif",

    },

    .....
};

// Apply the theme
Highcharts.setOptions(Highcharts.theme);

As for the exporting function you can use exporting.chartOptions to set the options you want to be exported, like width and height of the chart:

exporting: {
    chartOptions: {
        chart: {
            width: 300,
            height: 300
        }
    }
}

Or the font size of the title for that matter. The unwanted text appears when you use plotOptions.column.dataLabels.rotation. I don't know the reason and I think it may be a bug in Highcharts.

Here's a DEMO.

Upvotes: 1

Related Questions