CODEWITHSUNDEEP
highcharts
petko_stankoski
petko_stankoski

Reputation: 10713

Printing a highchart to show data for all the points

I have this chart:

http://jsfiddle.net/ECAM9/1/

And it works fine.

However when I print or export it, I want the resulting image or pdf file to look like this:

http://jsfiddle.net/rFzTG/

That means that I want every point to have info over it.

I was looking at this answer:

Highcharts add legend on export

And I tried adding this:

exporting:{
            chartOptions:{
                scatter: {
                    dataLabels: {
                        enabled: true,
                        formatter: function() {
                            return this.series.name +'</b><br/>'+ this.x +': '+ this.y +'°C';
                        }
                    },
                }
            }
        },

But again, the jpg file I print is without the info.

Upvotes: 0

Views: 1853

Answers (1)

jlbriggs
jlbriggs

Reputation: 17791

One way:

1) use 'useHTML' in the datalabels

2) on chart load event, hide the datalabel elements

The chart will display without datalabels, since you hid them, but print with datalabels, since the chart was created with them

http://jsfiddle.net/jlbriggs/Z7csw/

dataLabels: {
  enabled: true,
  useHTML:true,
  formatter: function() {
    return '<div class="datalabel">' +this.series.name +'</b><br/>'+
            this.x +': '+ this.y +'°C</div>';
  }
},

.

events:{
  load:function() {
    $('.datalabel').hide();
  }
}

EDIT: --> Ok, I have a quick example that works with printing here, based on comments below:

http://jsfiddle.net/jlbriggs/Z7csw/6/

It's not perfect, but it does work...

Upvotes: 1

Related Questions