Customizing export button- CanvasJS JavaScript Charts

Customizing export button- CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->

<div id="chartContainer" style="height: 360px; width: 100%;"></div>

CSS

.canvasjs-chart-toolbar button {
  width: 100px !important;
  border: 1px solid black !important;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
{
		title: {
			text: "Exporting chart "
		},
    exportEnabled:true,
    exportFileName:"CanvasJS",//File Name
		data: [
		{
			type: "spline",
			dataPoints: [ 
				{ x: 10, y: 4 }, 
				{ x: 20, y: 7 },
				{ x: 30, y: 2 },
				{ x: 40, y: 3 },
				{ x: 50, y: 5 }
			]
		}
		]
});
chart.render();

$('.canvasjs-chart-toolbar button>img').remove();
$('.canvasjs-chart-toolbar button').text('Click me');