{"action":"opened","issue":{"url":"https://api.github.com/repos/nnnick/Chart.js/issues/1522","labels_url":"https://api.github.com/repos/nnnick/Chart.js/issues/1522/labels{/name}","comments_url":"https://api.github.com/repos/nnnick/Chart.js/issues/1522/comments","events_url":"https://api.github.com/repos/nnnick/Chart.js/issues/1522/events","html_url":"https://github.com/nnnick/Chart.js/issues/1522","id":110888620,"number":1522,"title":"data variable is being over written after chart update","user":{"login":"dvenkatsagar","id":14003522,"avatar_url":"https://avatars.githubusercontent.com/u/14003522?v=3","gravatar_id":"","url":"https://api.github.com/users/dvenkatsagar","html_url":"https://github.com/dvenkatsagar","followers_url":"https://api.github.com/users/dvenkatsagar/followers","following_url":"https://api.github.com/users/dvenkatsagar/following{/other_user}","gists_url":"https://api.github.com/users/dvenkatsagar/gists{/gist_id}","starred_url":"https://api.github.com/users/dvenkatsagar/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dvenkatsagar/subscriptions","organizations_url":"https://api.github.com/users/dvenkatsagar/orgs","repos_url":"https://api.github.com/users/dvenkatsagar/repos","events_url":"https://api.github.com/users/dvenkatsagar/events{/privacy}","received_events_url":"https://api.github.com/users/dvenkatsagar/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-10-11T23:26:25Z","updated_at":"2015-10-11T23:26:25Z","closed_at":null,"body":"Hi,\r\nThis is a very weird bug that Im facing here. \r\nWhat I'm basically trying to do is update the chart with new labels.\r\n\r\nHere are the steps that Im following:\r\n1. Initialize chart with data 1.\r\n2. Update  data  with in chart after a set amount of time with data 2.\r\n3. After step 2 update, Update the data with in chart again after a set amount of time. <-- bug\r\n4. Labels dont update but values do.\r\n\r\nI understood where the bug is. It basically overwrites the data that the chart is initialized with.\r\nHere is my code:\r\n```javascript\r\n// data 1\r\nvar skills_program = {\r\n  labels: [\"C\", \"C++\", \"JAVA\", \"PYTHON\", \"SHELL SCRIPT\"],\r\n  datasets: [\r\n    {\r\n      label: \"Programming Skills\",\r\n      fillColor: \"rgba(151,187,205,0.5)\",\r\n      strokeColor: \"rgba(151,187,205,0.8)\",\r\n      highlightFill: \"rgba(151,187,205,0.75)\",\r\n      highlightStroke: \"rgba(151,187,205,1)\",\r\n      data: [8,8.5,7.5,9.5,8.5]\r\n    }\r\n  ]\r\n}\r\n\r\n// data 2\r\nvar skills_media = {\r\n  labels: [\"Adobe Suite\",\"Maya\",\"3DS Max\",\"Cinema 4D\",\"Open Source\"],\r\n  datasets: [\r\n    {\r\n      label: \"Media Creation Skills\",\r\n      fillColor: \"rgba(204,255,153,0.5)\",\r\n      strokeColor: \"rgba(204,255,153,0.8)\",\r\n      highlightFill: \"rgba(204,255,153,0.75)\",\r\n      highlightStroke: \"rgba(204,255,153,1)\",\r\n      data: [8,6.5,6,7.5,8.5]\r\n    }\r\n  ]\r\n}\r\n\r\n// data 3\r\nvar skills_web = {\r\n  labels: [\"HTML5\", \"CSS3\", \"PHP\", \"JS\", \"NODEJS\", \"SQL\", \"MONGO-DB\"],\r\n  datasets: [\r\n    {\r\n      label: \"Web Development Skills\",\r\n      fillColor: \"rgba(220,220,220,0.5)\",\r\n      strokeColor: \"rgba(220,220,220,0.8)\",\r\n      highlightFill: \"rgba(220,220,220,0.75)\",\r\n      highlightStroke: \"rgba(220,220,220,1)\",\r\n      data: [9.5, 9.5, 9.5, 9.5, 8.5, 8, 8]\r\n    }\r\n  ]\r\n}\r\n\r\n\r\n// options\r\nvar options = {\r\n  scaleLineColor: \"rgba(128,128,128,0.5)\",\r\n  scaleFontColor: \"#888\",\r\n  scaleFontSize : 13,\r\n  scaleOverride: true,\r\n  scaleSteps: 5,\r\n  scaleStepWidth: 2,\r\n  scaleStartValue: 0,\r\n  scaleGridLineColor : \"rgba(0,0,0,0.2)\",\r\n  barStrokeWidth : 1,\r\n  barValueSpacing : 15\r\n};\r\n\r\nvar ctx = document.getElementById(\"skills-chart\").getContext(\"2d\");\r\n\r\n// using skills_program as initializing data\r\nvar chart = new Chart(ctx).Bar(skills_program, options);\r\n\r\n// function to update data\r\nfunction load_skills(main_chart, load_data){\r\n  if (main_chart.datasets[0].bars.length > load_data.labels.length){\r\n    var diff = main_chart.datasets[0].bars.length - load_data.labels.length;\r\n    for(var i = 0; i < diff; i++){\r\n      main_chart.removeData();\r\n    }\r\n  }else if (main_chart.datasets[0].bars.length < load_data.labels.length) {\r\n    var diff = load_data.labels.length - main_chart.datasets[0].bars.length;\r\n    for(var i = 0; i < diff; i++){\r\n      main_chart.addData([0],\"\");\r\n    }\r\n  }\r\n\r\n  for(var i = 0; i < load_data.labels.length; i++){\r\n    // update value of bar\r\n    main_chart.datasets[0].bars[i].value = load_data.datasets[0].data[i];\r\n    // update label of bar\r\n    main_chart.datasets[0].bars[i].label = load_data.labels[i];\r\n\r\n    // update fill color of bar\r\n    main_chart.datasets[0].bars[i].fillColor = load_data.datasets[0].fillColor;\r\n    // update hightlight fill of bar\r\n    main_chart.datasets[0].bars[i].highlightFill = load_data.datasets[0].highlightFill;\r\n    // update hightlight stroke of bar\r\n    main_chart.datasets[0].bars[i].highlightStroke = load_data.datasets[0].highlightStroke;\r\n    // update stroke color of bar\r\n    main_chart.datasets[0].bars[i].strokeColor = load_data.datasets[0].strokeColor;\r\n    // update datasetLabel of bar\r\n    main_chart.datasets[0].bars[i].datasetLabel = load_data.datasets[0].label;\r\n    // update scale label of bar\r\n    main_chart.scale.xLabels[i] = load_data.labels[i];\r\n  }\r\n\r\n  // update dataset label, fillcolor and stroke color\r\n  main_chart.datasets[0].label = load_data.datasets[0].label;\r\n  main_chart.datasets[0].fillColor = load_data.datasets[0].fillColor;\r\n  main_chart.datasets[0].strokeColor = load_data.datasets[0].strokeColor;\r\n  main_chart.update();\r\n}\r\n\r\nconsole.log(skills_program.labels); // [\"C\", \"C++\", \"JAVA\", \"PYTHON\", \"SHELL SCRIPT\"]\r\nsetTimeout(function(){\r\n  // load with data 2\r\n  load_skills(charts.skills_chart, skills_media);\r\n\r\n  console.log(skills_program.labels); // [\"Adobe Suite\",\"Maya\",\"3DS Max\",\"Cinema 4D\",\"Open Source\"]<-- bug here: labels just change\r\n},3000);\r\n\r\nsetTimeout(function(){\r\n  // load with data 3\r\n  load_skills(charts.skills_chart, data.skills_web);\r\n  console.log(skills_program.labels); // changes again \r\n},6000);\r\n\r\nsetTimeout(function(){\r\n  load_skills(charts.skills_chart, skills_program);\r\n},9000);\r\n\r\n```\r\n\r\nThe only work around is to create a deep copy of the ```skills_program``` variable and send that copy to the ```new Chart(ctx).Bar()```\r\n\r\nKindly help me out here. \r\n\r\nThank you"}}