This is how $attr is created:

$attr = shortcode_atts( array(
        'chart' => null,
        'footer_caption' => null,
    ), $attr, $shortcode_tag );

This is the print_r of $attr in this post ( that has 3 graphs if it had more or less the array dimension would change):

    [chart] => 23
    [footer_caption] => label 1

    [chart] => 22
    [footer_caption] => label 2

    [chart] => 24
    [footer_caption] => label 3

Then i need to pass $attr['footer_caption'] to a JS file where the highcharts plugin settings are being defined like this:

    var captionLabel = "<?php echo $attr[ 'footer_caption' ]; ?>"

And this is the setting in the js file where i pass the $attr['footer_caption'] strings through captionLabel:

  credits: {
          enabled: false
  chart: {
          type: 'column',
          events: {
              load: function () {
                var label = this.renderer.label(captionLabel)
                      width: '400px',
                      fontSize: '9px'
                      'r': 2,
                      'padding': 5

                  label.align(Highcharts.extend(label.getBBox(), {
                      align: 'center',
                      x: 0, // offset
                      verticalAlign: 'bottom',
                      y: 20 // offset
                  }), null, 'spacingBox');

          marginBottom: 120
      legend: {
        align: 'center',
        verticalAlign: 'bottom',
        y: -30
    decimalPoint: ',',
    thousandsSep: '.'

But it only outputs the last footer caption to every chart (in this case 'label 3'. I was thinking it needs a foreach or a for loop but I don't know how to do it in this case cause I don't see the indexes. This is what $attr['footer_caption'] outputs:

[02-May-2017 15:31:17 UTC] label 1
[02-May-2017 15:31:18 UTC] label 2
[02-May-2017 15:31:19 UTC] label 3

Can anyone point me in the right direction? I know this question is probably confusing.

1 Answer 1


It seems like you are setting up the common Chart Options in a JS file but as all the charts are going to have different footer caption you shouldn't set it as a common option.

As you specified that the post has three charts that means the captionLabel JavaScript variable is getting declared and being assigned the value 3 times if that is part of shortcode. So the final value assigned to the captionLabel will be label 3 and then the chart options are being set in the js file. Thus, all your charts are having label 3 as footer caption.

May be you can set the label in Chart Options on per chart basis.

  • Thanks. How can i set the Chart Options on per chart basis without hacking the plugin files?
    – user117473
    May 3, 2017 at 12:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.