@datarailsshared/dr_renderer 1.2.190-dragons → 1.2.192-dragons

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarailsshared/dr_renderer",
-  "version": "1.2.190-dragons",
+  "version": "1.2.192-dragons",
   "description": "DataRails charts and tables renderer",
   "keywords": [
     "datarails",

package/src/highcharts_renderer.js

@@ -3261,6 +3261,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             enabled: false
         };
 
+        chartOptions.xAxis.labels = {
+            formatter: highchartsRenderer.getBreakdownXAxisLabelFormatter(chartOptions.series),
+        };
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -6783,6 +6787,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             label: 'Breakdown Chart ',
             title: 'Explain financial outcomes differences.',
             description: 'For example, describe the gaps between last and current year total revenue, breakdown by department.',
+            titleInEditor: 'This chart displays the breakdown of variance between two or more total values.',
             axisName: 'Category',
             legendName: 'Breakdown',
             startedMessage: 'To get started, drag one field to the Category and one field to the Value section.',
@@ -8659,6 +8664,15 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return { rows, cols };
     }
 
+    highchartsRenderer.getBreakdownXAxisLabelFormatter = function(chartSeries) {
+        const styleForCategoryLabel = 'font-weight: 700; font-size: 12px;';
+        const styleForBreakdownLabel = 'font-weight: 600; color: #6f6f6f; font-size: 11px;';
+        return function() {
+            const isTotal = lodash.some(chartSeries[0].data, point => point.name === this.value && point.isTotal);
+            return `<span style="${ isTotal ? styleForCategoryLabel : styleForBreakdownLabel }">${ this.value }</span>`;
+        }
+    }
+
     return highchartsRenderer;
 };