feat: colors example

examples/js/Examples.js

@@ -71,6 +71,7 @@ Examples.prototype = {
         "basic-bars-horizontal",
         "basic-bars-stacked",
         "basic-stacked-horizontal",
+        "basic-bars-custom-colors",
         "basic-pie",
         "basic-radar",
         "basic-bubble",

examples/js/examples/basic-bars-custom-colors.js

@@ -0,0 +1,45 @@
+(function () {
+
+Flotr.ExampleList.add({
+  key : 'basic-bars-custom-colors',
+  name : 'Basic Bars with Custom Colors',
+  callback : basic_bars_custom_colors
+});
+
+function basic_bars_custom_colors (container) {
+
+  var
+    d1 = [[0, 8], [1, 6], [2, 4], [3, 7]],       // Series 1
+    d2 = [[0.1, 5], [1.1, 9], [2.1, 3], [3.1, 8]],   // Series 2
+    d3 = [[0.2, 7], [1.2, 4], [2.2, 6], [3.2, 5]],   // Series 3
+    d4 = [[0.3, 3], [1.3, 8], [2.3, 9], [3.3, 4]],   // Series 4
+    d5 = [[0.4, 6], [1.4, 7], [2.4, 5], [3.4, 9]],   // Series 5
+    d6 = [[0.5, 9], [1.5, 3], [2.5, 8], [3.5, 6]],   // Series 6
+    d7 = [[0.6, 4], [1.6, 5], [2.6, 7], [3.6, 3]],   // Series 7
+    d8 = [[0.7, 8], [1.7, 6], [2.7, 4], [3.7, 7]];   // Series 8
+
+  // Draw the graph with custom colors from issue #322
+  Flotr.draw(
+    container,
+    [d1, d2, d3, d4, d5, d6, d7, {data: d8, color: '#0000FF'}],
+    {
+      colors: ["#89AFD2","#1D1D1D","#DF021D","#0E204B","#D67840","#0E204B","#D67840"],
+      bars : {
+        show : true,
+        horizontal : false,
+        shadowSize : 0,
+        barWidth : 0.1
+      },
+      mouse : {
+        track : true,
+        relative : true
+      },
+      yaxis : {
+        min : 0,
+        autoscaleMargin : 1
+      }
+    }
+  );
+}
+
+})();

examples/js/includes.dev.js

@@ -59,6 +59,7 @@ yepnope([
   'js/examples/basic-axis.js',
   'js/examples/basic-bars.js',
   'js/examples/basic-bars-stacked.js',
+  'js/examples/basic-bars-custom-colors.js',
   'js/examples/basic-pie.js',
   'js/examples/basic-radar.js',
   'js/examples/basic-bubble.js',

make/examples.json

@@ -14,6 +14,7 @@
       "./examples/js/examples/basic-stepped.js",
       "./examples/js/examples/basic-axis.js",
       "./examples/js/examples/basic-bars.js",
+      "./examples/js/examples/basic-bars-custom-colors.js",
       "./examples/js/examples/basic-bars-stacked.js",
       "./examples/js/examples/basic-pie.js",
       "./examples/js/examples/basic-radar.js",

package.json

@@ -21,7 +21,8 @@
     "build": "make build",
     "test": "npm run build && playwright test",
     "test:headed": "npm run build && playwright test --headed",
-    "test:debug": "npm run build && playwright test --debug"
+    "test:debug": "npm run build && playwright test --debug",
+    "test:update-snapshots": "npm run build && playwright test --update-snapshots"
   },
   "devDependencies": {
     "@playwright/test": "^1.40.0",

tests/visual-regression.spec.html

@@ -24,6 +24,7 @@
     <script src="../examples/js/examples/basic-axis.js"></script>
     <script src="../examples/js/examples/basic-bars-stacked.js"></script>
     <script src="../examples/js/examples/basic-bars.js"></script>
+    <script src="../examples/js/examples/basic-bars-custom-colors.js"></script>
     <script src="../examples/js/examples/basic-bubble.js"></script>
     <script src="../examples/js/examples/basic-candle-barchart.js"></script>
     <script src="../examples/js/examples/basic-candle.js"></script>

tests/visual-regression.spec.js

@@ -19,7 +19,10 @@ test.describe('Visual Regression Tests - Examples', () => {
     'basic',
     'basic-axis', 
     'basic-bars',
+    'basic-bars-custom-colors',
+    'basic-bars-horizontal',
     'basic-bars-stacked',
+    'basic-stacked-horizontal',
     'basic-bubble',
     'basic-candle',
     'basic-candle-barchart',