I am trying to use wpdatachartscallbacks to add an annotation to a highcharts bar chart. I am able to successfully add a line and annotation, but when I do, all the settings that were entered into the chart create wizard seem to be lost. For example, the Y axis label is just "Values" and not the label that I entered into the wizard. If I disable the call back, then the settings are all as expected.

I tried printing the chart object to the JS console at the function entrance and just before function exit. The the y-axis label is "values" at function entrance and exit.

Please advise on how to have the settings from the wizard combined with the modifications being made in the callback.

My example code is below:

<script type="text/javascript">
jQuery(window).on('load',function(){ 
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; } 
    wpDataChartsCallbacks[7] = function(obj){ 
        console.log("PRINTING OBJ");
        console.log(obj);
        obj.options.annotations = [{
          draggable: '',
          labelOptions: {
          shape: 'connector',
          align: 'right',
          justify: false,
          crop: true,
          style: {
            fontSize: '0.8em',
            textOutline: '1px white'
            }
          },
          labels: [
            {
            text: 'My text',
            point: {
              x: 'Point A',
              y: 25
              }
            }
          ]
        }
        ]
        
        obj.options.yAxis = {
          plotLines: [{
            color: '#FF0000',
            width: 2,
            value: 25,
            }]
          }
console.log(obj);

    }
});
</script>

Thank you for the response. Unfortunately my development site is behind a firewall and inaccessible to the Internet.

I was able to make some progress and would like you to confirm a technical behavior for wpDataCharts.

The documentation for wpDataChartsCallbacks implies that the callback has access to all of the classes and methods found in the charting library (Highcharts for me). However, it appears that the callbacks are executed before the chart object is created. If that is correct, then the callback does not have access to the Highchart object, but only has access to the configuration object that gets passed into Highchart when the chart is rendered.

Could you confirm this behavior?

After further studying the Highcharts API and digging further into the wpDataTables code, it appears that my annotations are not working because the Highcharts annotations.js is not being included by wpDataTables.

Per the Highcharts documentation, annotations are enabled by including

https://code.highcharts.com/modules/annotations.js

Could you tell me a way to have wpDataTables include this without me editing the plugin code?