<head>
<!-- Plotly.js -->
		<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
		</head>
		<body>
		<!-- Plotly chart will be drawn inside this DIV -->
		<div id="myDiv" style="width:100%;height:100%"></div>
		<script>
		/* JAVASCRIPT CODE GOES HERE */
		</script>
		</body>

		
var trace1 = {
    x: [0, 1, 2, 3, 4, 5, 6],
    y: [1, 9, 4, 7, 5, 2, 4],
    mode: 'markers',
    marker: {
        size: [20, 40, 25, 10, 60, 90, 30],
    }
};

var data = [trace1];

var layout = {
    title: 'Download Chart as SVG instead of PNG',
    showlegend: false
};

var config = {
  toImageButtonOptions: {
    format: 'svg', // one of png, svg, jpeg, webp
    filename: 'custom_image', 
    height: 500,
    width: 700,
    scale: 1 // Multiply title/legend/axis/canvas sizes by this factor
  }
};
              
Plotly.newPlot('myDiv', data, layout, config, {showSendToCloud: true});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.