# Failed to create a plot

**URL:** <https://community.plotly.com/t/failed-to-create-a-plot/3183>\
**Category:** plotly.js\
**Created:** [January 24, 2017, 6:10pm UTC](https://community.plotly.com/t/failed-to-create-a-plot/3183 "2017-01-24T18:10:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![alexche1981](https://avatars.discourse-cdn.com/v4/letter/a/91b2a8/32.png) [@alexche1981](https://community.plotly.com/u/alexche1981)\
**Post date:** [January 24, 2017, 6:10pm UTC](https://community.plotly.com/t/failed-to-create-a-plot/3183/1 "2017-01-24T18:10:35Z")

</div>

Hi,

I want to show a zoomable chart on my web ui and get the plotly\_relayout event after zoom. I am using Node.js version within Vue.js environment. Below is my code:

var plotly = require(‘plotly’)(username, api\_key); // I have replaced the user name and api\_key.

var data = [  
{  
x: [“2013-10-04 22:23:00”, “2013-11-04 22:23:00”, “2013-12-04 22:23:00”],  
y: [1, 3, 6],  
type: “scatter”  
}  
];  
var graphOptions = {filename: “date-axes”, fileopt: “overwrite”};  
plotly.plot(data, graphOptions, function (err, msg) {  
console.log(msg);  
});

The code is from an example of plotly, when it run plotly.plot, I got the error below:  
Fetch API cannot load [https://plot.ly/clientresp](https://plot.ly/clientresp). No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘[http://localhost:8080](http://localhost:8080)’ is therefore not allowed access. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

I have register a new account and have the api\_key for that. I don’t know what else I need to do. ‘localhost:8080’ is my local server.  
What else should I do for calling this api?

BTW how can I get the custom event after the zoom which is shown on [https://plot.ly/javascript/zoom-events/](https://plot.ly/javascript/zoom-events/)  
because there is no place to pass a html element to plotly.plot.

Many thanks!

---

<div class="post-metadata">

**Author:** ![lavanya](https://avatars.discourse-cdn.com/v4/letter/l/df788c/32.png) [@lavanya](https://community.plotly.com/u/lavanya)\
**Post date:** [January 25, 2017, 11:10am UTC](https://community.plotly.com/t/failed-to-create-a-plot/3183/2 "2017-01-25T11:10:30Z")

</div>

[https://jsfiddle.net/1yLavejg/12/](https://jsfiddle.net/1yLavejg/12/)

Pl chk this.

---

<div class="post-metadata">

**Author:** ![alexche1981](https://avatars.discourse-cdn.com/v4/letter/a/91b2a8/32.png) [@alexche1981](https://community.plotly.com/u/alexche1981)\
**Post date:** [January 26, 2017, 11:07am UTC](https://community.plotly.com/t/failed-to-create-a-plot/3183/3 "2017-01-26T11:07:05Z")

</div>

Thanks lavanya, I have resolved this issue

---

<div class="post-metadata">

**Author:** ![nichocam](https://avatars.discourse-cdn.com/v4/letter/n/c67d28/32.png) [@nichocam](https://community.plotly.com/u/nichocam)\
**Post date:** [February 15, 2017, 9:23pm UTC](https://community.plotly.com/t/failed-to-create-a-plot/3183/4 "2017-02-15T21:23:21Z")

</div>

Alexche1981, how did you resolve the CORS header problem? I’m running into this myself.