Change tabs from area samples to buttons to switch to be in line with other samples...

diff --git a/docs/samples/advanced/progress-bar.md b/docs/samples/advanced/progress-bar.md
index ff86c759cf06638b20cee0adcb8901d3ff04b0f1..26c4675ca138479e75a036841d06dbdb43834d04 100644 (file)
--- a/docs/samples/advanced/progress-bar.md
+++ b/docs/samples/advanced/progress-bar.md
@@ -23,7 +23,6 @@ const actions = [
         label: 'Dataset ' + (data.datasets.length + 1),
         backgroundColor: Utils.transparentize(dsColor, 0.5),
         borderColor: dsColor,
-        borderWidth: 1,
         data: Utils.numbers({count: data.labels.length, min: -100, max: 100}),
       };
       chart.data.datasets.push(newDataset);

diff --git a/docs/samples/animations/drop.md b/docs/samples/animations/drop.md
index ced95173374e980242f12dc0c31fd742a7e456bd..bdeaeb31a374160e78a499b0089029d57780d6fc 100644 (file)
--- a/docs/samples/animations/drop.md
+++ b/docs/samples/animations/drop.md
@@ -21,7 +21,6 @@ const actions = [
         label: 'Dataset ' + (data.datasets.length + 1),
         backgroundColor: Utils.transparentize(dsColor, 0.5),
         borderColor: dsColor,
-        borderWidth: 1,
         data: Utils.numbers({count: data.labels.length, min: -100, max: 100}),
       };
       chart.data.datasets.push(newDataset);

diff --git a/docs/samples/animations/loop.md b/docs/samples/animations/loop.md
index 943962cd741b176a64e0f802fa40cc94073cb094..d6eeb0fc3fc96e1729d68451216a53d0ea843171 100644 (file)
--- a/docs/samples/animations/loop.md
+++ b/docs/samples/animations/loop.md
@@ -21,7 +21,6 @@ const actions = [
         label: 'Dataset ' + (data.datasets.length + 1),
         backgroundColor: Utils.transparentize(dsColor, 0.5),
         borderColor: dsColor,
-        borderWidth: 1,
         data: Utils.numbers({count: data.labels.length, min: -100, max: 100}),
       };
       chart.data.datasets.push(newDataset);

diff --git a/docs/samples/area/line-boundaries.md b/docs/samples/area/line-boundaries.md
index 1f2c2fc055deb072bf19781a7b3ecd40bac918cd..3d9677bf8e2f9fa32e5c78a6cdf5ab2a160f4044 100644 (file)
--- a/docs/samples/area/line-boundaries.md
+++ b/docs/samples/area/line-boundaries.md
@@ -1,9 +1,5 @@
 # Line Chart Boundaries
 
-:::: tabs
-
-::: tab "Fill: false"
-
 ```js chart-editor
 // <block:setup:2>
 const inputs = {
@@ -41,261 +37,44 @@ let smooth = false;
 
 const actions = [
   {
-    name: 'Randomize',
-    handler(chart) {
-      // Utils.srand(Utils.rand())
+    name: 'Fill: false (default)',
+    handler: (chart) => {
       chart.data.datasets.forEach(dataset => {
-        dataset.data = generateData();
+        dataset.fill = false;
       });
       chart.update();
     }
   },
   {
-    name: 'Smooth',
-    handler(chart) {
-      smooth = !smooth;
-      chart.options.elements.line.tension = smooth ? 0.4 : 0;
-      chart.update();
-    }
-  }
-];
-// </block:actions>
-
-// <block:config:1>
-const config = {
-  type: 'line',
-  data: data,
-  options: {
-    plugins: {
-      filler: {
-        propagate: false,
-      }
-    },
-    interaction: {
-      intersect: false,
-    }
-  },
-};
-// </block:config>
-
-module.exports = {
-  actions: actions,
-  config: config,
-};
-```
-
-:::
-
-::: tab "Fill: origin"
-
-```js chart-editor
-// <block:setup:2>
-const inputs = {
-  min: -100,
-  max: 100,
-  count: 8,
-  decimals: 2,
-  continuity: 1
-};
-
-const generateLabels = () => {
-  return Utils.months({count: inputs.count});
-};
-
-const generateData = () => (Utils.numbers(inputs));
-// </block:setup>
-
-// <block:data:0>
-const data = {
-  labels: generateLabels(),
-  datasets: [
-    {
-      label: 'Dataset',
-      data: generateData(),
-      borderColor: Utils.CHART_COLORS.red,
-      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red),
-      fill: 'origin'
-    }
-  ]
-};
-// </block:data>
-
-// <block:actions:3>
-let smooth = false;
-
-const actions = [
-  {
-    name: 'Randomize',
-    handler(chart) {
-      // Utils.srand(Utils.rand())
+    name: 'Fill: origin',
+    handler: (chart) => {
       chart.data.datasets.forEach(dataset => {
-        dataset.data = generateData();
+        dataset.fill = 'origin';
       });
       chart.update();
     }
   },
   {
-    name: 'Smooth',
-    handler(chart) {
-      smooth = !smooth;
-      chart.options.elements.line.tension = smooth ? 0.4 : 0;
-      chart.update();
-    }
-  }
-];
-// </block:actions>
-
-// <block:config:1>
-const config = {
-  type: 'line',
-  data: data,
-  options: {
-    plugins: {
-      filler: {
-        propagate: false,
-      }
-    },
-    interaction: {
-      intersect: false
-    },
-  },
-};
-// </block:config>
-
-module.exports = {
-  actions: actions,
-  config: config,
-};
-```
-
-:::
-
-::: tab "Fill: start"
-
-```js chart-editor
-// <block:setup:1>
-const inputs = {
-  min: -100,
-  max: 100,
-  count: 8,
-  decimals: 2,
-  continuity: 1
-};
-
-const generateLabels = () => {
-  return Utils.months({count: inputs.count});
-};
-
-const generateData = () => (Utils.numbers(inputs));
-// </block:setup>
-
-// <block:data:0>
-const data = {
-  labels: generateLabels(),
-  datasets: [
-    {
-      label: 'Dataset',
-      data: generateData(),
-      borderColor: Utils.CHART_COLORS.red,
-      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red),
-      fill: 'start'
-    }
-  ]
-};
-// </block:data>
-
-// <block:actions:2>
-let smooth = false;
-
-const actions = [
-  {
-    name: 'Randomize',
-    handler(chart) {
-      // Utils.srand(Utils.rand())
+    name: 'Fill: start',
+    handler: (chart) => {
       chart.data.datasets.forEach(dataset => {
-        dataset.data = generateData();
+        dataset.fill = 'start';
       });
       chart.update();
     }
   },
   {
-    name: 'Smooth',
-    handler(chart) {
-      smooth = !smooth;
-      chart.options.elements.line.tension = smooth ? 0.4 : 0;
+    name: 'Fill: end',
+    handler: (chart) => {
+      chart.data.datasets.forEach(dataset => {
+        dataset.fill = 'end';
+      });
       chart.update();
     }
-  }
-];
-// </block:actions>
-
-// <block:config:0>
-const config = {
-  type: 'line',
-  data: data,
-  options: {
-    plugins: {
-      filler: {
-        propagate: false,
-      }
-    },
-    interaction: {
-      intersect: false,
-    },
   },
-};
-// </block:config>
-
-module.exports = {
-  actions: actions,
-  config: config,
-};
-```
-
-:::
-
-::: tab "Fill: end"
-
-```js chart-editor
-// <block:setup:2>
-const inputs = {
-  min: -100,
-  max: 100,
-  count: 8,
-  decimals: 2,
-  continuity: 1
-};
-
-const generateLabels = () => {
-  return Utils.months({count: inputs.count});
-};
-
-const generateData = () => (Utils.numbers(inputs));
-// </block:setup>
-
-// <block:data:0>
-const data = {
-  labels: generateLabels(),
-  datasets: [
-    {
-      label: 'Dataset',
-      data: generateData(),
-      borderColor: Utils.CHART_COLORS.red,
-      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red),
-      fill: 'end'
-    }
-  ]
-};
-// </block:data>
-
-// <block:actions:3>
-let smooth = false;
-
-const actions = [
   {
     name: 'Randomize',
     handler(chart) {
-      // Utils.srand(Utils.rand())
       chart.data.datasets.forEach(dataset => {
         dataset.data = generateData();
       });
@@ -321,11 +100,15 @@ const config = {
     plugins: {
       filler: {
         propagate: false,
+      },
+      title: {
+        display: true,
+        text: (ctx) => 'Fill: ' + ctx.chart.data.datasets[0].fill
       }
     },
     interaction: {
       intersect: false,
-    },
+    }
   },
 };
 // </block:config>
@@ -335,7 +118,3 @@ module.exports = {
   config: config,
 };
 ```
-
-:::
-
-::::

diff --git a/docs/samples/area/line-stacked.md b/docs/samples/area/line-stacked.md
index 5f5924944cf3b1f6f1574b4278f601319575a37b..4394b6aee082117cc2fe040bd8bdd7432dfd6850 100644 (file)
--- a/docs/samples/area/line-stacked.md
+++ b/docs/samples/area/line-stacked.md
@@ -1,166 +1,29 @@
 # Line Chart Stacked
 
-:::: tabs
-
-::: tab Stacked
-
 ```js chart-editor
 // <block:actions:2>
 const actions = [
   {
-    name: 'Randomize',
-    handler(chart) {
-      chart.data.datasets.forEach(dataset => {
-        dataset.data = Utils.numbers({count: chart.data.labels.length, min: -100, max: 100});
-      });
+    name: 'Stacked: true',
+    handler: (chart) => {
+      chart.options.scales.y.stacked = true;
       chart.update();
     }
   },
   {
-    name: 'Add Dataset',
-    handler(chart) {
-      const data = chart.data;
-      const dsColor = Utils.namedColor(chart.data.datasets.length);
-      const newDataset = {
-        label: 'Dataset ' + (data.datasets.length + 1),
-        backgroundColor: dsColor,
-        borderColor: dsColor,
-        fill: true,
-        data: Utils.numbers({count: data.labels.length, min: -100, max: 100}),
-      };
-      chart.data.datasets.push(newDataset);
+    name: 'Stacked: false (default)',
+    handler: (chart) => {
+      chart.options.scales.y.stacked = false;
       chart.update();
     }
   },
   {
-    name: 'Add Data',
-    handler(chart) {
-      const data = chart.data;
-      if (data.datasets.length > 0) {
-        data.labels = Utils.months({count: data.labels.length + 1});
-
-        for (var index = 0; index < data.datasets.length; ++index) {
-          data.datasets[index].data.push(Utils.rand(-100, 100));
-        }
-
-        chart.update();
-      }
-    }
-  },
-  {
-    name: 'Remove Dataset',
-    handler(chart) {
-      chart.data.datasets.pop();
+    name: 'Stacked Single',
+    handler: (chart) => {
+      chart.options.scales.y.stacked = 'single';
       chart.update();
     }
   },
-  {
-    name: 'Remove Data',
-    handler(chart) {
-      chart.data.labels.splice(-1, 1); // remove the label first
-
-      chart.data.datasets.forEach(dataset => {
-        dataset.data.pop();
-      });
-
-      chart.update();
-    }
-  }
-];
-// </block:actions>
-
-// <block:setup:1>
-const DATA_COUNT = 7;
-const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};
-
-const labels = Utils.months({count: 7});
-const data = {
-  labels: labels,
-  datasets: [
-    {
-      label: 'My First dataset',
-      data: Utils.numbers(NUMBER_CFG),
-      borderColor: Utils.CHART_COLORS.red,
-      backgroundColor: Utils.CHART_COLORS.red,
-      fill: true
-    },
-    {
-      label: 'My Second dataset',
-      data: Utils.numbers(NUMBER_CFG),
-      borderColor: Utils.CHART_COLORS.blue,
-      backgroundColor: Utils.CHART_COLORS.blue,
-      fill: true
-    },
-    {
-      label: 'My Third dataset',
-      data: Utils.numbers(NUMBER_CFG),
-      borderColor: Utils.CHART_COLORS.green,
-      backgroundColor: Utils.CHART_COLORS.green,
-      fill: true
-    },
-    {
-      label: 'My Fourth dataset',
-      data: Utils.numbers(NUMBER_CFG),
-      borderColor: Utils.CHART_COLORS.yellow,
-      backgroundColor: Utils.CHART_COLORS.yellow,
-      fill: true
-    }
-  ]
-};
-// </block:setup>
-
-// <block:config:0>
-const config = {
-  type: 'line',
-  data: data,
-  options: {
-    responsive: true,
-    plugins: {
-      title: {
-        display: true,
-        text: 'Chart.js Line Chart - stacked=true'
-      },
-      tooltip: {
-        mode: 'index'
-      },
-    },
-    interaction: {
-      mode: 'nearest',
-      axis: 'x',
-      intersect: false
-    },
-    scales: {
-      x: {
-        title: {
-          display: true,
-          text: 'Month'
-        }
-      },
-      y: {
-        stacked: true,
-        title: {
-          display: true,
-          text: 'Value'
-        }
-      }
-    }
-  }
-};
-// </block:config>
-
-module.exports = {
-  actions: actions,
-  config: config
-};
-```
-
-:::
-
-::: tab "Stacked single"
-
-```js chart-editor
-// <block:actions:2>
-const actions = [
   {
     name: 'Randomize',
     handler(chart) {
@@ -272,7 +135,7 @@ const config = {
     plugins: {
       title: {
         display: true,
-        text: 'Chart.js Line Chart - stacked=single'
+        text: (ctx) => 'Chart.js Line Chart - stacked=' + ctx.chart.options.scales.y.stacked
       },
       tooltip: {
         mode: 'index'
@@ -291,7 +154,7 @@ const config = {
         }
       },
       y: {
-        stacked: 'single',
+        stacked: true,
         title: {
           display: true,
           text: 'Value'
@@ -307,7 +170,3 @@ module.exports = {
   config: config
 };
 ```
-
-:::
-
-::::

diff --git a/docs/samples/line/line.md b/docs/samples/line/line.md
index 9510ccf0a90b299fbcac7b9b9a6a8a92fd8976da..f88a3c5e507413003cd310fc11e7aedc5c16dcb9 100644 (file)
--- a/docs/samples/line/line.md
+++ b/docs/samples/line/line.md
@@ -21,7 +21,6 @@ const actions = [
         label: 'Dataset ' + (data.datasets.length + 1),
         backgroundColor: Utils.transparentize(dsColor, 0.5),
         borderColor: dsColor,
-        borderWidth: 1,
         data: Utils.numbers({count: data.labels.length, min: -100, max: 100}),
       };
       chart.data.datasets.push(newDataset);

diff --git a/docs/samples/line/stepped.md b/docs/samples/line/stepped.md
index 9c5c6ac04d4de0f83b0b0d7656dde79d3879e6f5..ddc9263388a3782cd544e7d40a58bfa14e4972bd 100644 (file)
--- a/docs/samples/line/stepped.md
+++ b/docs/samples/line/stepped.md
@@ -1,6 +1,56 @@
 # Stepped Line Charts
 
 ```js chart-editor
+// <block:actions:2>
+const actions = [
+  {
+    name: 'Step: false (default)',
+    handler: (chart) => {
+      chart.data.datasets.forEach(dataset => {
+        dataset.stepped = false;
+      });
+      chart.update();
+    }
+  },
+  {
+    name: 'Step: true',
+    handler: (chart) => {
+      chart.data.datasets.forEach(dataset => {
+        dataset.stepped = true;
+      });
+      chart.update();
+    }
+  },
+  {
+    name: 'Step: before',
+    handler: (chart) => {
+      chart.data.datasets.forEach(dataset => {
+        dataset.stepped = 'before';
+      });
+      chart.update();
+    }
+  },
+  {
+    name: 'Step: after',
+    handler: (chart) => {
+      chart.data.datasets.forEach(dataset => {
+        dataset.stepped = 'after';
+      });
+      chart.update();
+    }
+  },
+  {
+    name: 'Step: middle',
+    handler: (chart) => {
+      chart.data.datasets.forEach(dataset => {
+        dataset.stepped = 'middle';
+      });
+      chart.update();
+    }
+  }
+];
+// </block:actions>
+
 // <block:setup:1>
 const data = {
   labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6'],
@@ -10,13 +60,6 @@ const data = {
       data: Utils.numbers({count: 6, min: -100, max: 100}),
       borderColor: Utils.CHART_COLORS.red,
       fill: false,
-
-      // Change the stepped mode to explore different stepped chart options
-      // false: no stepping
-      // true: stepped before interpolation
-      // 'before': step before interpolation
-      // 'after': step after interpolation
-      // 'middle': step middle interpolation
       stepped: true,
     }
   ]
@@ -44,7 +87,7 @@ const config = {
 // </block:config>
 
 module.exports = {
-  actions: [],
+  actions: actions,
   config: config,
 };
 ```