Updated background-color properties as per latest update of CanvasJS

vishwas-r · vishwas-r · commit 545782440330 · 2021-08-16T14:46:39.000+05:30
diff --git a/dist/canvasjsascsv.min.js b/dist/canvasjsascsv.min.js
diff --git a/index.html b/index.html
@@ -182,19 +182,7 @@
 
 <body>
 	<h1 id="exportcanvasjschartdataascsv">Export CanvasJS Chart Data as CSV</h1>
-	<p>This plugin allows you to export and save CanvasJS Chart's data as CSV. Check out <a href="https://github.com/vishwas-r/Export-CanvasJS-Chart-Data-as-CSV">Github Repository</a> for more info / examples.</p>
-	<h2 id="canvasjs">CanvasJS</h2>
-	<p>CanvasJS is an HTML5 &amp; JavaScript based Charting Library that runs on all modern devices including iPhone, Android, Desktops, etc. Charts are beautiful and API is very simple to use.</p>
-	<h4 id="canvasjsfeatures">CanvasJS Features:</h4>
-	<ul>
-		<li>Simple API and easy to use</li>
-		<li>Supports 30+ different types of Charts / Graphs</li>
-		<li>10x faster than conventional Flash / SVG based Charting Libraries</li>
-		<li>Comes with Several beautiful looking themes</li>
-		<li>Well Maintained and Updated Documentation</li>
-		<li>Works across browsers (Chrome, Firefox, Safari, IE8+)</li>
-		<li>Can be integrated with Serverside and Frontend technologies like ASP.Net, PHP, Spring MVC, JSP, jQuery, Angular, React, etc.</li>
-	</ul>
+	<p>This plugin allows you to export and save <a href="https://canvasjs.com/" target="_blank">CanvasJS</a> Chart's data as CSV. Check out <a href="https://github.com/vishwas-r/Export-CanvasJS-Chart-Data-as-CSV">Github Repository</a> for more info / examples.</p>
 	<h4 id="howtouse">How to Use?</h4>
 	<ul>
 		<li>Create and Render CanvasJS Chart</li>
diff --git a/src/CanvasJS As CSV.js b/src/CanvasJS As CSV.js
@@ -10,13 +10,13 @@ function CanvasJSDataAsCSV(chart, fileName) {
 	if (chart.exportEnabled) {
 		var exportCSV = document.createElement('div');
 		var text = document.createTextNode("Save as CSV");
-		exportCSV.setAttribute("style", "padding: 12px 8px; background-color: " + chart.toolbar.backgroundColor + "; color: " + chart.toolbar.fontColor);
+		exportCSV.setAttribute("style", "padding: 12px 8px; background-color: " + chart.toolbar.itemBackgroundColor + "; color: " + chart.toolbar.fontColor);
 		exportCSV.appendChild(text);
 		exportCSV.addEventListener("mouseover", function () {
-			exportCSV.setAttribute("style", "padding: 12px 8px; background-color: " + chart.toolbar.backgroundColorOnHover + "; color: " + chart.toolbar.fontColorOnHover);
+			exportCSV.setAttribute("style", "padding: 12px 8px; background-color: " + chart.toolbar.itemBackgroundColorOnHover + "; color: " + chart.toolbar.fontColorOnHover);
 		});
 		exportCSV.addEventListener("mouseout", function () {
-			exportCSV.setAttribute("style", "padding: 12px 8px; background-color: " + chart.toolbar.backgroundColor + "; color: " + chart.toolbar.fontColor);
+			exportCSV.setAttribute("style", "padding: 12px 8px; background-color: " + chart.toolbar.itemBackgroundColor + "; color: " + chart.toolbar.fontColor);
 		});
 		exportCSV.addEventListener("click", function () {
 			parseCSV({
@@ -30,16 +30,16 @@ function CanvasJSDataAsCSV(chart, fileName) {
 		var base64Img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEgSURBVEhL3dM/SgNBFMfxBS8gWkYb0dJSyBGCwdIzRPAKgrZKINdIkVJB0qqteIdYCYoHEPX74P1gMszuzG5SiD/4wM6/99jJpvq3GeIVPwUu0ToLpIrVad1EB3Pp3KRLA1PcRAdyCYtLURNtziUsHMqmeGOUxnNtPs2cZNp+mk2S0eIteu7O5y5wgFN8Yw8vePZnnZVktLiDJzxi1+cOfe4GHxhhgjHOoLOSTLgYbjZz7OPaxzOc4Nif4/3JaNHe4MHpDc7xiW284R1b2IS9ka61MWpg925NrPi9z9mfx65pgC+fO0Lfn21/Nqt8RUo8XordZ9cmSjyuTfHGKH+nQe6qptiA5QqpPcbWkin5PXJNaot3Tdhk7cUVKxwUr6pfwprgQh4A9MYAAAAASUVORK5CYII=";
 		var exportButton = document.createElement('button');
 
-		exportButton.style.cssText = "position:relative;display: inline-block;padding: 0px 4px;height: 27px;cursor: pointer;text-align: center;text-decoration: none;background-color:" + chart.toolbar.backgroundColor + ";border: 1px solid " + chart.toolbar.borderColor + ";left:" + (chart.container.clientWidth - (chart.options.zoomEnabled ? 115 : 60)) + "px; top: 1px";
+		exportButton.style.cssText = "position:relative;display: inline-block;padding: 0px 4px;height: 27px;cursor: pointer;text-align: center;text-decoration: none;background-color:" + chart.toolbar.itemBackgroundColor + ";border: 1px solid " + chart.toolbar.borderColor + ";left:" + (chart.container.clientWidth - (chart.options.zoomEnabled ? 115 : 60)) + "px; top: 1px";
 
 		var img = document.createElement("IMG");
 		img.setAttribute("src", base64Img);
 		exportButton.appendChild(img);
 		exportButton.addEventListener("mouseover", function () {
-			this.style.cssText = this.style.cssText + "background-color: " + chart.toolbar.backgroundColorOnHover;
+			this.style.cssText = this.style.cssText + "background-color: " + chart.toolbar.itemBackgroundColorOnHover;
 		});
 		exportButton.addEventListener("mouseout", function () {
-			this.style.cssText = this.style.cssText + "background-color: " + chart.toolbar.backgroundColor;
+			this.style.cssText = this.style.cssText + "background-color: " + chart.toolbar.itemBackgroundColor;
 		});
 		exportButton.addEventListener("click", function () {
 			parseCSV({
