Highstock charts give "Uncaught TypeError: Cannot read property 'addPoint' of undefined" error

Question

I am using the highstock charts library for a set of 4 charts. I used the options object and literal notation as described HERE. The 4 charts have the same set of options by default (the renderCharts() function in the code bellow is responsible for that) and there is a charts type picker (the setChatType() function ) with the help of which the user can change the chart type.

See all togheter HERE.

Can anyone please tell me the cause of and solution for this error in the console: "Uncaught TypeError: Cannot read property 'addPoint' of undefined"?

Thank you!

            /* ============ CHARTS OPTIONS BEGIN ============ */

              var options = {
              chart : {
                zoomType: 'x',
                events : {
                  load : function () {
                      // set up the updating of the chart each second
                      var series = this.series[0];
                      setInterval(function () {
                        var x = (new Date()).getTime();
                        var y = Math.round(Math.random() * 100);
                        series.addPoint([x, y]);
                      }, 1000);
                    }
                  }
                },
                rangeSelector: {
                  buttons: [{
                      count: 1,
                      type: 'minute',
                      text: '1M'
                  }, {
                      count: 5,
                      type: 'minute',
                      text: '5M'
                  }, {
                      type: 'all',
                      text: 'All'
                  }],
                  inputEnabled: false,
                  selected: 0
                },
                title : {
                    text: null
                },
                exporting: {
                    enabled: false
                },
                // Disable navigator
                navigator : {
                  enabled : false
                },
                series : [{
                  name : '',
                  data : (function () {
                      // generate an array of random data
                      var data = [],
                      time = (new Date()).getTime(), i;

                      for (i = -999; i <= 0; i = i + 1) {
                          data.push([
                              time + i * 1000,
                              Math.round(Math.random() * 100)
                          ]);
                      }
                      return data;
                  }())
              }]
            }

            /* ============ CHARTS OPTIONS END ============ */  

            /* ============ DRAW CHARTS BEGIN ============ */

            function renderCharts(){
              $('div.chart-container').each(function(){
                var chartId = $(this).attr('id');
                var chartIdParts = chartId.split('-');
                var chartIdentifier = chartIdParts[1];

                //Set chart options dinamically
                var chartId = "chart" + chartIdentifier;
                var chart = $('#' + chartId);
                var renderTo = "chartcontainer-" + chartIdentifier;

                //Render Charts for each aech container
                options.chart.renderTo = renderTo;
                options.chart.type = 'line';
                var chart = new Highcharts.StockChart(options);
              });
            }

            function setChatType(){
              // Show types list (piker)
              $('.current-type').on('click', function(){
                $(this).parents('div.chart-options').find('ul.type ul').addClass('clicked');
              });

              $('.chart-options ul ul li a').on('click', function(){

                //Get piked chart type
                var type = $(this).parent('li').attr('data-chart-type');

                // For text and Title Capitalization
                var textAndTitle = type.replace(/^[a-z]/, function(m){ return m.toUpperCase() });

                // Show piked type in picker
                var currSetClass = 'current-type ' + type;
                $(this).parents('.chart-options').find('.current-type')
                    .text(textAndTitle)
                    .attr({
                      class : currSetClass,
                      title: textAndTitle
                    });

                // Then Hide the types list
                $('.chart-options ul ul').removeClass('clicked');

                //Identify current chart container by ID
                var chartCtnId= $(this).parents('div.chart').find('.chart-container').attr('id');

                // Render chart again with new type
                options.chart.renderTo = chartCtnId;
                options.chart.type = type;
                var chart = new Highcharts.StockChart(options);

              });
            }

            /* ============ DRAW CHARTS END ============ */

            $(document).ready(function(){  

              $("article.grid:even").addClass('left')
              $("article.grid:odd").addClass('right');

             // Draw charts
              renderCharts();

              // Set/change chart type
              setChatType();

            });

Answer 1

The solution, suggested by Pawel: instead of var chart = new Highcharts.StockChart(options); use var chart = new Highcharts.StockChart( $.extend(true, {}, options) );