optional config

README.md

@@ -119,6 +119,38 @@ CHART_TYPES = (
 )
 ```
 
+### `callbacks`
+
+Since ChartJS and the plugins have a plethora of options available, we will never be able to make them all available within the wagtail interface.
+That is why we added a chart config callback option.
+
+```python
+CHART_CONFIG_CALLBACKS = (
+    ('barchart_labels', 'Bigger font and bold labels'),
+)
+
+class ContentBlocks(StreamBlock):
+    chart_block = ChartBlock(callbacks=CHART_CONFIG_CALLBACKS)
+```
+
+You then need to have a global function named the same (in this case 'barchart_labels') that returns an options object with the overrides/addons you want to add:
+
+```js
+window.barchart_labels = function() {
+    return {
+        plugins: {
+            datalabels: {
+                font: {
+                    size: 18,
+                    weight: 'bold',
+                },
+                color: '#ff0000'
+            }
+        }
+    }
+}
+```
+
 
 ## Dependencies
 * This project relies on [Jspreadsheet Community Edition](https://bossanova.uk/jspreadsheet/v4/) for data entry and manipulation. 

wagtailcharts/blocks.py

@@ -110,6 +110,10 @@ def __init__(self, chart_types=CHART_TYPES, **kwargs):
         chart_type_block.set_name('chart_type')
         self.child_blocks['chart_type'] = chart_type_block
         self.child_blocks.move_to_end('chart_type', last=False)
+        if 'callbacks' in kwargs:
+            callbacks_block = ChoiceBlock(choices=kwargs.get('callbacks'), label='Chart Config Callbacks', required=False)
+            callbacks_block.set_name('callbacks')
+            self.child_blocks['callbacks'] = callbacks_block
 
     title = CharBlock(required=False)
     datasets = TextBlock(default='{"data":[], "options":{}}')
@@ -122,6 +126,7 @@ class Meta:
         template = 'wagtailcharts/blocks/chart_block.html'
         colors = CHART_COLOR_CHOICES
         multi_chart_types = MULTI_CHART_TYPES
+        callbacks = None
 
 
 class ChartBlockAdapter(StructBlockAdapter):
@@ -132,6 +137,7 @@ def js_args(self, block):
         meta = result[2]
         meta['colors'] = block.meta.colors
         meta['multi_chart_types'] = block.meta.multi_chart_types
+        meta['callbacks'] = block.meta.callbacks
         result[2] = meta
         return result
 

wagtailcharts/static/wagtailcharts/js/wagtailcharts.js

@@ -126,6 +126,7 @@ for (i = 0; i < charts.length; ++i) {
     const chart_options =  JSON.parse(charts[i].dataset.datasets).options;
     const chart_settings = JSON.parse(charts[i].dataset.config);
     const chartType = charts[i].dataset.chartType;
+    const configCallback = charts[i].dataset.callback || null;
     const chartObj = chart_types[chartType];
     let datasets = chartObj.render_datasets(chart_data, chart_options);
     const labels = chartObj.render_labels(chart_data, chart_options);
@@ -369,7 +370,10 @@ for (i = 0; i < charts.length; ++i) {
 
     chartOptions.options = mergeDeep(options, chart_types[chartType].chart_options)
 
-    console.log(chartOptions)
+    if (configCallback !== null) {
+        const fn = new Function(`return ${configCallback}()`);
+        chartOptions.options = mergeDeep(chartOptions.options, fn())
+    }
 
     let myChart = new Chart(charts[i].getContext('2d'), chartOptions);
 }

wagtailcharts/templates/wagtailcharts/blocks/chart_block.html

@@ -10,6 +10,7 @@
     data-datasets="{{self.datasets}}"
     data-config="{{self.settings.config}}"
     data-chart-type="{{self.chart_type}}"
+    {% if self.callbacks %}data-callback="{{self.callbacks}}"{% endif %}
     aria-label="A chart {% if self.title %} with the title {{self.title}} {%endif%}">
     >
     <p>

wagtailcharts_demo/home/blocks.py

@@ -23,10 +23,14 @@
 )
 
 CHART_TYPES = (
-    ('line', 'Line chart with custom title'),
+    ('bar', 'Bar chart with custom title'),
+)
+
+CHART_CONFIG_CALLBACKS = (
+    ('barchart_labels', 'Bigger font and bold labels'),
 )
 
 class ContentBlocks(StreamBlock):
     title = CharBlock()
-    chart_block_custom = ChartBlock(label="My custom chart block", colors=COLORS, chart_types=CHART_TYPES)
+    chart_block_custom = ChartBlock(label="My custom chart block", colors=COLORS, chart_types=CHART_TYPES, callbacks=CHART_CONFIG_CALLBACKS)
     chart_block = ChartBlock()

wagtailcharts_demo/home/static/js/main.js

@@ -0,0 +1,14 @@
+
+window.barchart_labels = function() {
+    return {
+      plugins: {
+        datalabels: {
+          font: {
+            size: 18,
+            weight: 'bold',
+          },
+          color: '#ff0000'
+        }
+      }
+    }
+  }

wagtailcharts_demo/home/templates/home/home_page.html

@@ -19,6 +19,7 @@ <h1>{{self.title}}</h1>
 
 
 {% block extra_js %}
+<script src="{% static 'js/main.js' %}"></script>
 {% render_charts %}
 {% endblock %}
 

wagtailcharts_demo/wagtailcharts_demo/static/js/wagtailcharts_demo.js

@@ -0,0 +1,13 @@
+window.bold_and_bigger_font_for_barchart_labels = function() {
+    return {
+      plugins: {
+        datalabels: {
+          font: {
+            size: 18,
+            weight: 'bold',
+          },
+          color: '#ff0000'
+        }
+      }
+    }
+  }