CODEWITHSUNDEEP
svghighcharts
Con Antonakos
Con Antonakos

Reputation: 1789

Alter SVG After Highcharts is Redrawn

I'm trying to specifically target the first and last x-axis labels, which are text elements, and alter their attributes.

To preface this issue, I was trying to keep the first and last x-axis labels within the confines of the Highcharts container. Unfortunately, they are cutting off in the UI.

Highcharts X-Axis Label UI Bug

This is my configuration:

        xAxis: [{
            type: 'datetime',
            showFirstLabel: true, 
            showLastLabel: true, 
            labels: { 
                step: 3,
            formatter: function(){
                return options.labels[this.value];
            },
                style: {
                    fontSize: '10px',
                    color: '#9c9c9c'
                },
                // x: 5,
                y: 10
            },
            startOnTick: true,
            // lineColor: 'transparent',
            tickLength: 0,
            minPadding: 0,
            maxPadding: 0
        }],

The step key is causing this I realize. Otherwise, I would be able to use overflow:justify, but I wanted the step. So, I then decided that perhaps altering the SVG would be a good solution. It worked when the chart is first loaded, but it does not work when being redrawn.

This was my solution on 'load', which I'd like to replicate on 'redraw':

Highcharts.Chart.prototype.callbacks.push(function(chart){
    $('.highcharts-axis-labels.highcharts-xaxis-labels text').first().attr('x', 25);
    $('.highcharts-axis-labels.highcharts-xaxis-labels text').last().attr('x', 813);
});

Upvotes: 0

Views: 212

Answers (1)

Mark
Mark

Reputation: 108567

You should configure these callbacks in the options of your chart. It's cleaner that way:

function moveLabels(){
    $('.highcharts-axis-labels.highcharts-xaxis-labels text').first().attr('x', 25);
    $('.highcharts-axis-labels.highcharts-xaxis-labels text').last().attr('x', 813);
}

$('#container').highcharts({
    chart: {
        events: {
            load: moveLabels
            redraw: moveLabels
           }
        }
    },
    ...

Upvotes: 2

Related Questions