use custom styles for the form timeline, move away from charts.css

customize.dist/src/less2/include/charts.less

@@ -1,4 +1,58 @@
 .charts_main() {
+
+    // basic functional things
+    table.cp-charts.column {
+        box-sizing: border-box;
+        display: flex;
+        height: 100%;
+        overflow-x: auto;
+        tbody {
+            height: 100%;
+            display: flex;
+            align-items: stretch;
+            min-width: 100%;
+
+            tr {
+                position: relative;
+                display: flex;
+                justify-content: flex-start;
+
+                flex-direction: row;
+                flex-shrink: 1;
+                flex-grow: 1;
+                justify-content: flex-start;
+
+                align-items: flex-end;
+
+                td {
+                    display: flex;
+                    height: calc(100% * var(--size));
+                    align-items: flex-start;
+                    flex-grow: 1;
+                }
+            }
+        }
+    }
+
+    // styles
+    table.cp-charts.column {
+        //border: 1px solid white;
+        tbody {
+            tr {
+                max-width: 30px;
+
+                td {
+                    min-width: 3px;
+                    border: 1px solid @cryptpad_color_brand;
+                    background: @cryptpad_color_brand;
+                    margin: 1px;
+                }
+            }
+        }
+    }
+
+
+
     &.bar {
         th {
             //width: 200px !important;

www/form/app-form.less

@@ -69,6 +69,12 @@
         justify-content: center;
         min-width: 300px;
 
+        div.timeline-container {
+            width: 100%;
+            height: 200px;
+        }
+
+/*
         table.cp-chart-table {
 
             --color: @colortheme_apps[pad];
@@ -107,6 +113,7 @@
                 color: transparent;
             }
         }
+*/
 
         .cp-form-input-block {
             display: flex;
@@ -838,8 +845,6 @@
         }
     }
 
-    .charts-css {
+    .charts_main();
-        .charts_main();
-    }
 }
 

www/form/inner.js

@@ -38,7 +38,7 @@ define([
     'css!/bower_components/codemirror/addon/dialog/dialog.css',
     'css!/bower_components/codemirror/addon/fold/foldgutter.css',
     'css!/lib/datepicker/flatpickr.min.css',
-    'css!/lib/chart/charts.min.css',
+    //'css!/lib/chart/charts.min.css',
     'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
     'less!/form/app-form.less',
 ], function (
@@ -1910,27 +1910,29 @@ define([
         var max_day = arrayMax(times);
         var days = getDayArray(new Date(min_day), new Date(max_day));
 
-        return Charts.table(h('tbody', days.map(function (time) {
+        if (days.length < 2) { return; }
-            var count = tally[time] || 0;
-            var percent = count / max_count;
-            var date = new Date(time).toLocaleDateString();
 
-            var bar = h('td.cp-bar', {
+        return h('div.timeline-container', {
-                style: '--size: ' + Number(percent).toFixed(2),
+            //style: 'width: 100%; height: 200px;',
-                "data-tippy-placement": "top",
+
-                title: Messages._getKey('form_timelineLabel', [date, count])
+
-            });
+        }, h('table.cp-charts.column.cp-chart-timeline.cp-chart-table',
-            var dateEl = h('th', { scope: "row" }, date);
+                h('tbody', days.map(function (time) {
-
+                    var count = tally[time] || 0;
-            return h('tr', bar, dateEl );
+                    var percent = count / max_count;
-        })), [
+                    var date = new Date(time).toLocaleDateString();
-            "charts-css",
+
-            "cp-chart-table",
+                    var bar = h('td', {
-            "column",
+                        style: '--size: ' + Number(percent).toFixed(2),
-            //"data-spacing-2",
+                        //"data-tippy-placement": "top",
-            //"show-labels",
+                        title: Messages._getKey('form_timelineLabel', [date, count])
-            //"labels-align-center"
+                    });
-        ]);
+                    //var dateEl = h('th', { scope: "row" }, date);
+
+                    return h('tr', bar/* dateEl*/ );
+                }))
+            )
+        );
     };
 
     var renderResults = APP.renderResults = function (content, answers, showUser) {