Take snapshot of HighChart with render.text.css

Question

I have a simple highChart with x-axis label disabled. Later I am adding text in chart using the following code

function populateDateOnChart(chartID,minRange,maxRange) {
    var chart = graphChart;     
    if(chart) {
        var panelPlyGraph = Ext.getCmp(chartID);
        chart.renderer.text(Highcharts.dateFormat('%Y-%m-%d', minRange), 1, panelPlyGraph.getHeight()-2)
        .css({
            color : '#666666' ,
            align : 'right',
            fontSize     : '18pt',
            fontWeight : 'normal'
        }).add();

        chart.renderer.text(Highcharts.dateFormat('%Y-%m-%d', maxRange), panelPlyGraph.getWidth()-148, panelPlyGraph.getHeight()-2)
        .css({
            color : 'red',//'#666666' ,
            align : 'right',
            fontSize : '18pt',
            fontWeight : 'normal'
        }).add();

    }
}

I also, tried adding it to chart.events.load, as shown below but still not able to get it on the snapshot.

load: function() {
graphOffsets = {};
graphOffsets.left = graphChart.axes[0].left;
graphOffsets.length = graphChart.axes[0].len;
graphOffsets.min = graphChart.axes[0].min;
graphOffsets.max = graphChart.axes[0].max;
graphOffsets.invalidMax = inValidMaxdate;
populateDateOnChart('AccumulateGraph', graphOffsets.min, graphOffsets.max);

}

I am able to achieve the xAxis labels perfectly in my HTML page. The problem is, I need to save image of the graph. For this, I have used canvg. The image appears but this xAxis text which is set using chart.renderer.text.css is not appearing in the image.

The xAxis labels attribute is fine but it doesn't allow me to add padding before the first label and after the first label.

Can anyone please suggest me an alternative to canvg which will take chart.render.text.css also while saving image OR a way to position the labels in highChart as shown in code.

We do not have a div for the HighChart, we are putting it in ExtJS panel. Can this be a reason for the label not appearing in snapshot?

Thanks in Advance!

Answer 1

I think I know where is the problem - you are getting wrong container, as you suggested. Two things to be changed:

• populateDateOnChart('AccumulateGraph', graphOffsets.min, graphOffsets.max); - instead of 'AccumulateGraph' use this : populateDateOnChart(this, graphOffsets.min, graphOffsets.max); - now you will pass on chart object, not just the ID

• update your method accordingly:

    function populateDateOnChart(chart,minRange,maxRange) { chart.renderer.text(Highcharts.dateFormat('%Y-%m-%d', minRange), 1, chart.plotTop + chart.plotHeight - 20) .css({ color : '#666666' , align : 'right', fontSize : '18pt', fontWeight : 'normal' }).add(); chart.renderer.text(Highcharts.dateFormat('%Y-%m-%d', maxRange), chart.plotLeft + chart.plotWidth -148, chart.plotTop + chart.plotHeight - 20) .css({ color : 'red',//'#666666' , align : 'right', fontSize : '18pt', fontWeight : 'normal' }).add(); } 

I'm just curious - why can't you use axis labels? For example you can use xAxis.tickPositioner to return only first and last values like this:

xAxis: {
  tickPositioner: functin(min, max) {
    return [min, max];
  },
  labels: {
    formatter: function() {
      return Highcharts.dateFormat('%Y-%m-%d', this.key);
    }
  }
}