samples: update heatmap gradient-legend demo

Author: junedchhipa

samples/react/heatmap/gradient-legend.html

@@ -111,7 +111,7 @@
                   // automatically reorients based on legend.position.
                   gradientLegend: {
                     enabled: true,
-                    width: 240,
+                    width: '75%',
                     thickness: 14,
                     showHoverValue: true,
                   },
@@ -126,10 +126,10 @@
               width: 1,
             },
             legend: {
-              position: 'bottom',
+              position: 'right',
             },
             title: {
-              text: 'Temperature Heatmap — hover a cell to see its value on the gradient',
+              text: 'Heatmap with gradient legend',
             },
           },
         })

samples/source/heatmap/gradient-legend.xml

@@ -37,7 +37,7 @@ plotOptions: {
       // automatically reorients based on legend.position.
       gradientLegend: {
         enabled: true,
-        width: 240,
+        width: '75%',
         thickness: 14,
         showHoverValue: true,
       }
@@ -52,10 +52,10 @@ stroke: {
   width: 1
 },
 legend: {
-  position: 'bottom'
+  position: 'right'
 },
 title: {
-  text: 'Temperature Heatmap — hover a cell to see its value on the gradient'
+  text: 'Heatmap with gradient legend'
 },
 </options>
 

samples/vanilla-js/heatmap/gradient-legend.html

@@ -99,7 +99,7 @@
               // automatically reorients based on legend.position.
               gradientLegend: {
                 enabled: true,
-                width: 240,
+                width: '75%',
                 thickness: 14,
                 showHoverValue: true,
               },
@@ -114,10 +114,10 @@
           width: 1,
         },
         legend: {
-          position: 'bottom',
+          position: 'right',
         },
         title: {
-          text: 'Temperature Heatmap — hover a cell to see its value on the gradient',
+          text: 'Heatmap with gradient legend',
         },
       }
 

samples/vue/heatmap/gradient-legend.html

@@ -115,7 +115,7 @@
                   // automatically reorients based on legend.position.
                   gradientLegend: {
                     enabled: true,
-                    width: 240,
+                    width: '75%',
                     thickness: 14,
                     showHoverValue: true,
                   },
@@ -130,10 +130,10 @@
               width: 1,
             },
             legend: {
-              position: 'bottom',
+              position: 'right',
             },
             title: {
-              text: 'Temperature Heatmap — hover a cell to see its value on the gradient',
+              text: 'Heatmap with gradient legend',
             },
           },
         },