Cannot read properties of undefined (reading 'formatter')
MaffooClock opened this issue · 2 comments
I've started a new Rails 7.0 project using Webpack.
The installation instructions don't exactly match up with my environment, but I believe I have the correct setup (for Highcharts):
yum add chartkick highcharts
# Gemfile
...
gem 'chartkick'
...
// app/javascript/application.js
...
import 'chartkick/highcharts'
...I can create a simple line chart with one or more series of data:
<%= area_chart @data[:volts], id: 'data-voltage', title: 'Voltage' %>...and it renders to the view just fine.
When I attempt to implement three Y axes, with one having its own Y axis on the left, and the other two sharing the Y axis on the right (yAxis is being set in the dataset):
<%= line_chart @data[:channel1], id: 'data-channel1', title: 'Power Consumption', library: {
yAxis: [
{
// First dataset, on the left
title: { text: 'Amps' }
}, {
// Second and third datasets, on the right
title: { text: 'Watts/VA' },
opposite: true
}
]
} %>...I am met with Error Loading Chart: Cannot read properties of undefined (reading 'formatter'). The error points to if (chartType !== "pie" && !options.yAxis.labels.formatter) in Line 1104 -- I guess options.yAxis.labels is undefined?
I even tried to set the property manually:
<%= line_chart @data[:channel1], id: 'data-channel1', title: 'Power Consumption', library: {
yAxis: [
{
// First dataset, on the left
title: { text: 'Amps' },
labels: { formatter: nil }
}, {
// Second and third datasets, on the right
title: { text: 'Watts/VA' },
labels: { formatter: nil },
opposite: true
}
]
} %>... but no change.
When I remove the entire library: {...} piece, then I get Highcharts Error #18, which makes sense because the second and third datasets are specifying yAxis: 1, so I know the library can "see" what I'm trying to do. When I remove yAxis from the datasets, the chart renders fine (except that all three datasets are now sharing one Y axis).
HTML generated by Chartkick
<div id="data-channel1" 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>
(function() {
if (document.documentElement.hasAttribute("data-turbolinks-preview"))
return;
if (document.documentElement.hasAttribute("data-turbo-preview"))
return;
var createChart = function() {
new Chartkick["LineChart"]("data-channel1",[{
"name": "Current (Amps)",
"data": [["2022-04-04T12:53:22.000+00:00", "7.87"], ["2022-04-04T13:08:29.000+00:00", "7.88"], ["2022-04-04T13:24:09.000+00:00", "7.88"], ["2022-04-04T13:39:14.000+00:00", "7.8"], ["2022-04-04T13:54:22.000+00:00", "7.79"], ["2022-04-04T14:09:29.000+00:00", "7.81"], ["2022-04-04T14:24:35.000+00:00", "7.79"], ["2022-04-04T14:39:42.000+00:00", "0.0"], ["2022-04-04T14:54:47.000+00:00", "0.0"], ["2022-04-04T15:09:52.000+00:00", "0.0"], ["2022-04-04T15:24:58.000+00:00", "0.0"], ["2022-04-04T15:40:05.000+00:00", "0.0"], ["2022-04-04T15:55:13.000+00:00", "0.0"], ["2022-04-04T16:10:18.000+00:00", "0.0"], ["2022-04-04T16:25:23.000+00:00", "0.0"], ["2022-04-04T16:40:29.000+00:00", "0.0"], ["2022-04-04T16:55:35.000+00:00", "0.0"], ["2022-04-04T17:10:42.000+00:00", "0.0"], ["2022-04-04T17:25:50.000+00:00", "0.0"], ["2022-04-04T17:40:58.000+00:00", "0.0"], ["2022-04-04T17:56:05.000+00:00", "0.0"], ["2022-04-04T18:11:12.000+00:00", "0.0"], ["2022-04-04T18:26:18.000+00:00", "0.0"], ["2022-04-04T18:49:22.000+00:00", "0.0"], ["2022-04-04T19:04:30.000+00:00", "0.0"], ["2022-04-04T19:19:37.000+00:00", "0.0"], ["2022-04-04T19:34:42.000+00:00", "0.0"], ["2022-04-04T19:51:06.000+00:00", "0.0"], ["2022-04-04T20:06:13.000+00:00", "0.0"], ["2022-04-04T20:21:21.000+00:00", "0.0"], ["2022-04-04T20:36:26.000+00:00", "0.0"], ["2022-04-04T20:51:34.000+00:00", "0.0"], ["2022-04-04T21:06:41.000+00:00", "0.0"]],
"yAxis": 0
}, {
"name": "Apparent Power (Watts)",
"data": [["2022-04-04T12:53:22.000+00:00", "607.69"], ["2022-04-04T13:08:29.000+00:00", "606.33"], ["2022-04-04T13:24:09.000+00:00", "603.83"], ["2022-04-04T13:39:14.000+00:00", "604.17"], ["2022-04-04T13:54:22.000+00:00", "602.85"], ["2022-04-04T14:09:29.000+00:00", "600.59"], ["2022-04-04T14:24:35.000+00:00", "600.84"], ["2022-04-04T14:39:42.000+00:00", "0.0"], ["2022-04-04T14:54:47.000+00:00", "0.0"], ["2022-04-04T15:09:52.000+00:00", "0.0"], ["2022-04-04T15:24:58.000+00:00", "0.0"], ["2022-04-04T15:40:05.000+00:00", "0.0"], ["2022-04-04T15:55:13.000+00:00", "0.0"], ["2022-04-04T16:10:18.000+00:00", "0.0"], ["2022-04-04T16:25:23.000+00:00", "0.0"], ["2022-04-04T16:40:29.000+00:00", "0.0"], ["2022-04-04T16:55:35.000+00:00", "0.0"], ["2022-04-04T17:10:42.000+00:00", "0.0"], ["2022-04-04T17:25:50.000+00:00", "0.0"], ["2022-04-04T17:40:58.000+00:00", "0.0"], ["2022-04-04T17:56:05.000+00:00", "0.0"], ["2022-04-04T18:11:12.000+00:00", "0.0"], ["2022-04-04T18:26:18.000+00:00", "0.0"], ["2022-04-04T18:49:22.000+00:00", "0.0"], ["2022-04-04T19:04:30.000+00:00", "0.0"], ["2022-04-04T19:19:37.000+00:00", "0.0"], ["2022-04-04T19:34:42.000+00:00", "0.0"], ["2022-04-04T19:51:06.000+00:00", "0.0"], ["2022-04-04T20:06:13.000+00:00", "0.0"], ["2022-04-04T20:21:21.000+00:00", "0.0"], ["2022-04-04T20:36:26.000+00:00", "0.0"], ["2022-04-04T20:51:34.000+00:00", "0.0"], ["2022-04-04T21:06:41.000+00:00", "0.0"]],
"yAxis": 1
}, {
"name": "Real Power (VA)",
"data": [["2022-04-04T12:53:22.000+00:00", "955.85"], ["2022-04-04T13:08:29.000+00:00", "955.51"], ["2022-04-04T13:24:09.000+00:00", "952.02"], ["2022-04-04T13:39:14.000+00:00", "944.95"], ["2022-04-04T13:54:22.000+00:00", "942.93"], ["2022-04-04T14:09:29.000+00:00", "945.42"], ["2022-04-04T14:24:35.000+00:00", "944.32"], ["2022-04-04T14:39:42.000+00:00", "0.0"], ["2022-04-04T14:54:47.000+00:00", "0.0"], ["2022-04-04T15:09:52.000+00:00", "0.0"], ["2022-04-04T15:24:58.000+00:00", "0.0"], ["2022-04-04T15:40:05.000+00:00", "0.0"], ["2022-04-04T15:55:13.000+00:00", "0.0"], ["2022-04-04T16:10:18.000+00:00", "0.0"], ["2022-04-04T16:25:23.000+00:00", "0.0"], ["2022-04-04T16:40:29.000+00:00", "0.0"], ["2022-04-04T16:55:35.000+00:00", "0.0"], ["2022-04-04T17:10:42.000+00:00", "0.0"], ["2022-04-04T17:25:50.000+00:00", "0.0"], ["2022-04-04T17:40:58.000+00:00", "0.0"], ["2022-04-04T17:56:05.000+00:00", "0.0"], ["2022-04-04T18:11:12.000+00:00", "0.0"], ["2022-04-04T18:26:18.000+00:00", "0.0"], ["2022-04-04T18:49:22.000+00:00", "0.0"], ["2022-04-04T19:04:30.000+00:00", "0.0"], ["2022-04-04T19:19:37.000+00:00", "0.0"], ["2022-04-04T19:34:42.000+00:00", "0.0"], ["2022-04-04T19:51:06.000+00:00", "0.0"], ["2022-04-04T20:06:13.000+00:00", "0.0"], ["2022-04-04T20:21:21.000+00:00", "0.0"], ["2022-04-04T20:36:26.000+00:00", "0.0"], ["2022-04-04T20:51:34.000+00:00", "0.0"], ["2022-04-04T21:06:41.000+00:00", "0.0"]],
"yAxis": 1
}],{
"title": "Power Consumption",
"library": {
"yAxis": [{
"title": {
"text": "Amps"
},
"labels": {
// This is just a test to see if manually setting this property makes the error go away -- no difference
"formatter": null
}
}, {
"title": {
"text": "Watts/VA"
},
"labels": {
// This is just a test to see if manually setting this property makes the error go away -- no difference
"formatter": null
},
"opposite": true
}]
}
});
};
if ("Chartkick"in window) {
createChart();
} else {
window.addEventListener("chartkick:load", createChart, true);
}
}
)();
</script>Just for grits 'n' shins, I decided to comment out the entire chunk that's been giving me trouble:
chartkick/vendor/assets/javascripts/chartkick.js
Lines 1104 to 1108 in 7f86b40
...and my chart rendered just exactly the way I wanted. Not certain whether there's a bug or f it's still user-error.
Hey @MaffooClock, thanks for reporting! It looks like Chartkick.js isn't expecting yAxis to be an array. Multiple y-axes aren't officially supported, but we could probably update Chartkick.js to handle this situation without throwing an error if you'd like to submit a PR there.
Pushed a fix to Chartkick.js: ankane/chartkick.js@63e4cf3