Error on updateData with Chart.js and bar/line charts

[cbolanos79]

Hi,

I'm having problemas when calling to updateData using Chart.js and bar/line charts on Rails.
It works ok using pie charts.

So I create a new chart and see it on view:

<div id="last_12_months_chart" style="height: 300px; width: 100%; text-align: center; color: #999; line-height: 300px; font-size: 14px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif;">Loading...</div><script type="text/javascript">
--
  | new Chartkick["ColumnChart"]("last_12_months_chart", [{"name":"Cancelado","data":[["Enero",213],["Febrero",186],["Marzo",166],["Abril",174],["Mayo",190],["Junio",190],["Julio",246],["Agosto",235],["Septiembre",215],["Octubre",271],["Noviembre",195],["Diciembre",159]]},{"name":"Finalizado","data":[["Enero",1578],["Febrero",1435],["Marzo",1311],["Abril",1312],["Mayo",1880],["Junio",1609],["Julio",1784],["Agosto",1783],["Septiembre",1584],["Octubre",1750],["Noviembre",1492],["Diciembre",1120]]},{"name":"Sin taxis","data":[["Enero",1270],["Febrero",1181],["Marzo",1013],["Abril",1570],["Mayo",1414],["Junio",876],["Julio",1057],["Agosto",1284],["Septiembre",1350],["Octubre",2050],["Noviembre",1736],["Diciembre",1706]]}], {"stacked":true,"colors":["#e40000","#065","#ff3"]});
  | </script>

I create a var to use chart:

var last_12_months_chart = Chartkick.charts["last_12_months_chart"];

If I try to update data:

data = [{"name":"Cancelado","data":[["Enero",213],["Febrero",186],["Marzo",166],["Abril",174],["Mayo",190],["Junio",190],["Julio",246],["Agosto",235],["Septiembre",215],["Octubre",271],["Noviembre",195],["Diciembre",159]]},{"name":"Finalizado","data":[["Enero",1578],["Febrero",1435],["Marzo",1311],["Abril",1312],["Mayo",1880],["Junio",1609],["Julio",1784],["Agosto",1783],["Septiembre",1584],["Octubre",1750],["Noviembre",1492],["Diciembre",1120]]},{"name":"Sin taxis","data":[["Enero",1270],["Febrero",1181],["Marzo",1013],["Abril",1570],["Mayo",1414],["Junio",876],["Julio",1057],["Agosto",1284],["Septiembre",1350],["Octubre",2050],["Noviembre",1736],["Diciembre",1706]]}];
last_12_months_chart.updateData(data);

it fails:

chartkick.self-f46c1b0cd1c1416287370a921db044cb589c7d681ab888291e08d1a26921db10.js?body=1:1730 Uncaught TypeError: Cannot read property 'fontSize' of undefined
    at Object._parseFont (Chart.bundle.self-f4a94f9a9c61f47cfd8b46041c35cce200ea8e7c89213e36a620d69dc1d5464a.js?body=1:2643)
    at ChartElement.fit (Chart.bundle.self-f4a94f9a9c61f47cfd8b46041c35cce200ea8e7c89213e36a620d69dc1d5464a.js?body=1:18515)
    at ChartElement.update (Chart.bundle.self-f4a94f9a9c61f47cfd8b46041c35cce200ea8e7c89213e36a620d69dc1d5464a.js?body=1:18440)
    at getMinimumBoxSize (Chart.bundle.self-f4a94f9a9c61f47cfd8b46041c35cce200ea8e7c89213e36a620d69dc1d5464a.js?body=1:6370)
    at Object.each (Chart.bundle.self-f4a94f9a9c61f47cfd8b46041c35cce200ea8e7c89213e36a620d69dc1d5464a.js?body=1:1800)
    at Object.update (Chart.bundle.self-f4a94f9a9c61f47cfd8b46041c35cce200ea8e7c89213e36a620d69dc1d5464a.js?body=1:6381)
    at Chart.updateLayout (Chart.bundle.self-f4a94f9a9c61f47cfd8b46041c35cce200ea8e7c89213e36a620d69dc1d5464a.js?body=1:8787)
    at Chart.update (Chart.bundle.self-f4a94f9a9c61f47cfd8b46041c35cce200ea8e7c89213e36a620d69dc1d5464a.js?body=1:8742)
    at Chart.construct (Chart.bundle.self-f4a94f9a9c61f47cfd8b46041c35cce200ea8e7c89213e36a620d69dc1d5464a.js?body=1:8473)
    at new Chart (Chart.bundle.self-f4a94f9a9c61f47cfd8b46041c35cce200ea8e7c89213e36a620d69dc1d5464a.js?body=1:8411)

I'm using the same data created on the view.
Any idea?

Thanks in advance.

[ankane]

Hey @cbolanos79, I tried the code above but it doesn't throw an error for me. From the backtrace, it looks like it's having trouble trying to parse the font size. I'd make sure you're on the latest version of Chartkick and Chart.js, and aren't overriding any Chart.js global configuration that might cause this.

[ankane]

Closing due to no response