Blank charts after 1.4.0 update when PieSeries is included

[ndrwkim]

After upgrading highcharts-core from v1.3.7 to v1.4.0, my charts now load as blank. After some further investigation, I can get the charts to load properly when I disable the pie charts (I have 2 bar charts, 2 pie charts, and a map chart).

Were there some non-backward-compatible changes made to pie charts in v1.4.0? (Still broken on v1.5.0)

Here's the relevant DOM output with only one pie chart enabled:

<div id="contracts_category_breakdown" class="dashboard-chart"></div>

<script>
        Highcharts.setOptions({
  colors: ['#66BA9D',
'#FF8D9A',
'#8980FF',
'#FFBC74',
'#5F5E5E',
'#7BB3FF'],
  credits: {
  enabled: false
},
  exporting: {
  buttons: {
  'contextButton': {
  x: 5,
  y: -10
}
}
},
  lang: {
  thousandsSep: ','
},
  navigation: {
  menuItemStyle: {'color': '#5f5e5e', 'fontFamily': 'Roboto', 'fontSize': '12px'}
},
  plotOptions: {
  bar: {
  pointPadding: 0,
  type: 'bar'
},
  column: {
  colorByPoint: true,
  pointPadding: 0,
  type: 'column'
},
  pie: {
  dataLabels: {
  enabled: false
},
  showInLegend: true,
  type: 'pie'
},
  series: {
  dataSorting: {
  enabled: true
},
  type: 'series'
}
},
  title: {
  align: 'left',
  style: {'color': '#000000', 'fontFamily': 'Roboto', 'fontSize': '16px', 'fontWeight': '500'},
  text: 'Chart title'
},
  xAxis: {
  lineWidth: 0,
  labels: {
  style: {'color': '#5f5e5e', 'fontFamily': 'Roboto', 'fontSize': '12px'}
}
},
  yAxis: {
  title: {
  text: null
}
}
});
        document.addEventListener('DOMContentLoaded', function() {
Highcharts.chart('contracts_category_breakdown',
{
  exporting: {
  buttons: {
  'contextButton': {
  menuItems: ['viewFullscreen',
'printChart']
}
}
},
  legend: {
  align: 'right',
  enabled: true,
  itemStyle: {'color': '#5f5e5e', 'fontFamily': 'Roboto', 'fontSize': '12px'},
  labelFormat: '{name} {percentage:.1f}%',
  layout: 'vertical',
  verticalAlign: 'bottom'
},
  plotOptions: {
  pie: {
  allowPointSelect: true,
  cursor: 'pointer',
  dataLabels: {
  enabled: false
},
  showInLegend: true,
  type: 'pie'
},
  series: {
  dataSorting: {
  enabled: false
},
  type: 'series'
}
},
  series: [{
  data: [['Electricity',
154],
['Natural Gas',
101]],
  type: 'pie'
}],
  title: {
  text: 'Contracts Category Breakdown'
},
  tooltip: {
  format: {point.name}: {point.y},
  style: {'color': '#5F5E5E', 'fontFamily': 'Roboto', 'fontSize': '12px', 'fontWeight': '700'}
}
},
);
});
</script>

[hcpchris]

Thanks, @ndrwkim ! I don't recall there being any changes to PieSeries introduced, let alone ones that might affect this, but I may be misremembering. Let me take a closer / deeper look, and thanks for sharing the DOM output: That will definitely help me recreate the issue and track down what may be preventing the chart from rendering correctly. I'll hopefully have more info and a resolution on this issue today.

[hcpchris]

Okay, good news - I've been able to isolate the issue that is causing the chart not to render. It is caused by a bug in the serialization of the tooltip.format option, though why this would be serializing strangely (and more specifically, serializing strangely if it's in use within a pie series) I do not yet know. I'm going to track down what the root cause of this bug is, but I can definitely confirm that to be the proximal issue preventing the chart from rendering. Hopefully, I'll have this fixed + patched soon.

[hcpchris]

Hi @ndrwkim : When you have a moment, can you share:

1. The code snippet or JS template that you're using to configure your tooltip (or specifically your tooltip.format) option, and
2. The method call (presumably .to_js_literal()) that you are using to serialize your chart to JS?

I'm having difficulty regenerating the DOM output that you provided with the incorrectly-serialized tooltip.format so seeing how you exactly you are setting that option will help me to create a test case for it and track down the exact bug.

[ndrwkim]

I sent an email with the details you've requested.

[hcpchris]

I've been able to resolve the issue. It turned out to not be related to PieSeries at all, but instead an edge case when serializing strings. Specifically, if careful validation were disabled (the default, introduced in v.1.4 for performance improvements) and a string value started with {, ended with }, and contained a colon : it was getting improperly identified as a JS literal object when serializing. As a result, your tooltip.format string was getting serialized incorrectly to a JS literal string, preventing the chart from loading.

I'll be pushing out a patch release shortly (once the CI/CD pipelines run). Once the new version (v.1.5.1) is deployed, this issue will get auto-closed (I'll also comment here to double-confirm, in any case).

[hcpchris]

And just confirming that the fix for this has been released in v.1.5.1. Hopefully this resolves the issue for you, but if it does not feel free to re-open. And if you run into any other issues, please feel free to log an issue here. Thanks again!

[ndrwkim]

It works! Thanks so much @hcpchris! Have a great weekend.