jquery - Implementing highcharts in OOP Javascript -

i want implement highcharts in full object oriented way , configurable. can call object , pass in values options chart should display.

so started creating function like: highchartclass , please @ code below:

$(function () {     var highchartclass = {         create: function (toid, type) {             return new highcharts.chart({                 chart: {                     renderto: toid,                     type: type,                     backgroundcolor: 'transparent'                 },                 legend: {},                 subtitle: {                     text: ''                 },                 xaxis: {},                 yaxis: [],                 tooltip: {},                 plotoptions: {},                 series: []             });         }     };     var chartobj = highchartclass.create('container', 'area');     chartobj.settitle({         text: 'cpm imps spend time'     });      var chartoptions = highcharts.getoptions();     console.log("======present chartoptions==========");     console.log(chartobj.options);      chartobj.options.plotoptions['area'] = {         pointstart: 1,         marker: {             enabled: false,             symbol: 'circle',             radius: 1,              states: {                 hover: {                     enabled: true                 }             }         }     };     chartobj.options['xaxis'] = {         allowdecimals: false,         labels: {             formatter: function () {                 return 'week ' + this.value; // clean, unformatted number year             }         }     };      chartobj.options['yaxis'] = [{          linewidth: 1,         title: {             text: ''         },         labels: {             formatter: function () {              }         },         gridlinewidth: 0,         minorgridlinewidth: 0     }, {          linewidth: 1,         title: {             text: ''         },         labels: {             formatter: function () {              }         },         gridlinewidth: 0,         minorgridlinewidth: 0,         linkedto: 0,         opposite: true     }];     chartobj.options.tooltip = {         backgroundcolor: null,         borderwidth: 0,         shadow: false,         usehtml: true,         style: {             padding: 0         },         pointformat: '<p id="p{series.name}"><b>${point.y:,.0f}</b></p>',         shared: true,         crosshairs: true     };     chartobj.options.series = [{         name: 'cpm',         data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640],         color: 'rgb(87, 188, 0)'     }, {         name: 'imps',         data: [null, null, null, null, null, null, null, null, null, null,             5, 25, 50, 120, 150, 100, 126, 160, 269, 60, 165, 471, 322         ],         color: 'rgb(213, 156, 72)'     }, {         name: 'spend',         data: [null, null, null, null, null, null, null, null, null, null,             50, 215, 50, 120, 150, 200, 426, 660, 150, 160, 165, 171, 50         ],         color: 'rgb(12, 170, 226)'       }];       // highcharts.setoptions(chartobj);     console.log("======after chartoptions==========");     console.log(chartoptions);     console.log("======chart object==========");     console.log(chartobj);  }); 

fiddle demo oop

i need create oop kind of highchart, calling getter or setter methods, chart should drawn,

need know, why oop kind of chart not drawn, , need improvement on that.

the normal way of same chart looks like:

actual chart without oop