how to create a new field for highcharts footer labels

I’m trying to add a footer label to highcharts on wpdatatables wordpress plugin like in this fiddle:

This is the js i have for the label:

  chart: {
    type: 'column',
    events: {
        load: function () {
            var labelText = getElementById('set_footer_label').text()
            var label = this.renderer.label(labelText)
                width: '400px',
                fontSize: '9px'
                'r': 2,
                'padding': 5

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

    marginBottom: 120

And this is how i created the field where we set the label for each graph:

         <label for="set_caption_grid"><span><strong><?php _e('Footer label settings','wpdatatables');?></strong></span></label>
           <label for="set_footer_label"><?php _e('Footer label','wpdatatables'); ?></label> <input type="text" id="set_footer_label" value="" />

Now im trying to save the value that the user will put on that field but for that ill have to edit files from the plugin. is there an easier way to achieve what i want without having to hack the plugin? (backoffice users being able to set/edit a footer label for the charts they create)

Read more here: how to create a new field for highcharts footer labels

Leave a Reply

Your email address will not be published. Required fields are marked *