Add commented out sample, order sub cats alphabetically

Author: LeeLenaleee

docs/.vuepress/config.js

@@ -134,40 +134,40 @@ module.exports = {
         {
           title: 'Bar Charts',
           children: [
-            'bar/vertical',
+            'bar/border-radius',
+            'bar/floating',
             'bar/horizontal',
             'bar/stacked',
             'bar/stacked-groups',
-            'bar/floating',
-            'bar/border-radius',
+            'bar/vertical',
           ]
         },
         {
           title: 'Line Charts',
           children: [
+            'line/interpolation',
             'line/line',
             'line/multi-axis',
+            'line/point-styling',
+            'line/segments',
             'line/stepped',
-            'line/interpolation',
             'line/styling',
-            // 'line/point-styling',
-            'line/segments',
           ]
         },
         {
           title: 'Other charts',
           children: [
             'other-charts/bubble',
-            'other-charts/scatter',
-            'other-charts/scatter-multi-axis',
+            'other-charts/combo-bar-line',
             'other-charts/doughnut',
-            'other-charts/pie',
             'other-charts/multi-series-pie',
+            'other-charts/pie',
             'other-charts/polar-area',
             'other-charts/polar-area-center-labels',
             'other-charts/radar',
             'other-charts/radar-skip-points',
-            'other-charts/combo-bar-line',
+            'other-charts/scatter',
+            'other-charts/scatter-multi-axis',
             'other-charts/stacked-bar-line',
           ]
         },
@@ -188,29 +188,29 @@ module.exports = {
             'scales/linear-min-max-suggested',
             'scales/linear-step-size',
             'scales/log',
+            'scales/stacked',
             'scales/time-line',
             'scales/time-max-span',
             'scales/time-combo',
-            'scales/stacked'
           ]
         },
         {
           title: 'Scale Options',
           children: [
+            'scale-options/center',
             'scale-options/grid',
             'scale-options/ticks',
             'scale-options/titles',
-            'scale-options/center'
           ]
         },
         {
           title: 'Legend',
           children: [
-            'legend/position',
-            'legend/title',
-            'legend/point-style',
             'legend/events',
             'legend/html',
+            'legend/point-style',
+            'legend/position',
+            'legend/title',
           ]
         },
         {
@@ -227,20 +227,20 @@ module.exports = {
         },        {
           title: 'Tooltip',
           children: [
-            'tooltip/position',
-            'tooltip/interactions',
-            'tooltip/point-style',
             'tooltip/content',
             'tooltip/html',
+            'tooltip/interactions',
+            'tooltip/point-style',
+            'tooltip/position',
           ]
         },
         {
           title: 'Scriptable Options',
           children: [
             'scriptable/bar',
             'scriptable/bubble',
-            'scriptable/pie',
             'scriptable/line',
+            'scriptable/pie',
             'scriptable/polar',
             'scriptable/radar',
           ]
@@ -259,20 +259,20 @@ module.exports = {
           title: 'Advanced',
           children: [
             'advanced/data-decimation',
-            'advanced/progress-bar',
-            'advanced/radial-gradient',
-            'advanced/linear-gradient',
-            'advanced/programmatic-events',
             'advanced/derived-axis-type',
             'advanced/derived-chart-type',
+            'advanced/linear-gradient',
+            'advanced/programmatic-events',
+            'advanced/progress-bar',
+            'advanced/radial-gradient',
           ]
         },
         {
           title: 'Plugins',
           children: [
             'plugins/chart-area-border',
-            'plugins/quadrants',
             'plugins/doughnut-empty-state',
+            'plugins/quadrants',
           ]
         },
         'utils'
@@ -292,11 +292,11 @@ module.exports = {
         {
           title: 'General',
           children: [
-            'general/data-structures',
             'general/accessibility',
-            'general/options',
             'general/colors',
+            'general/data-structures',
             'general/fonts',
+            'general/options',
             'general/padding',
             'general/performance'
           ]
@@ -305,33 +305,33 @@ module.exports = {
           title: 'Configuration',
           children: [
             'configuration/',
-            'configuration/responsive',
+            'configuration/animations',
+            'configuration/canvas-background',
+            'configuration/decimation',
             'configuration/device-pixel-ratio',
-            'configuration/locale',
+            'configuration/elements',
             'configuration/interactions',
-            'configuration/canvas-background',
-            'configuration/animations',
             'configuration/layout',
             'configuration/legend',
-            'configuration/title',
+            'configuration/locale',
+            'configuration/responsive',
             'configuration/subtitle',
+            'configuration/title',
             'configuration/tooltip',
-            'configuration/elements',
-            'configuration/decimation'
           ]
         },
         {
           title: 'Chart Types',
           children: [
-            'charts/line',
+            'charts/area',
             'charts/bar',
-            'charts/radar',
+            'charts/bubble',
             'charts/doughnut',
+            'charts/line',
+            'charts/mixed',
             'charts/polar',
-            'charts/bubble',
+            'charts/radar',
             'charts/scatter',
-            'charts/area',
-            'charts/mixed'
           ]
         },
         {
@@ -365,13 +365,13 @@ module.exports = {
           children: [
             'developers/',
             'developers/api',
-            ['api/', 'TypeDoc'],
-            'developers/updates',
-            'developers/plugins',
-            'developers/charts',
             'developers/axes',
+            'developers/charts',
             'developers/contributing',
-            'developers/publishing'
+            'developers/plugins',
+            'developers/publishing',
+            ['api/', 'TypeDoc'],
+            'developers/updates',
           ]
         },
       ],

docs/samples/line/point-styling.md

@@ -0,0 +1,136 @@
+# Point Styling
+
+```js chart-editor
+// <block:actions:2>
+const actions = [
+  {
+    name: 'pointStyle: circle (default)',
+    handler: (chart) => {
+      chart.data.datasets.forEach(dataset => {
+        dataset.pointStyle = 'cirlce';
+      });
+      chart.update();
+    }
+  },
+  {
+    name: 'pointStyle: cross',
+    handler: (chart) => {
+      chart.data.datasets.forEach(dataset => {
+        dataset.pointStyle = 'cross';
+      });
+      chart.update();
+    }
+  },
+  {
+    name: 'pointStyle: crossRot',
+    handler: (chart) => {
+      chart.data.datasets.forEach(dataset => {
+        dataset.pointStyle = 'crossRot';
+      });
+      chart.update();
+    }
+  },
+  {
+    name: 'pointStyle: dash',
+    handler: (chart) => {
+      chart.data.datasets.forEach(dataset => {
+        dataset.pointStyle = 'dash';
+      });
+      chart.update();
+    }
+  },
+  {
+    name: 'pointStyle: line',
+    handler: (chart) => {
+      chart.data.datasets.forEach(dataset => {
+        dataset.pointStyle = 'line';
+      });
+      chart.update();
+    }
+  },
+  {
+    name: 'pointStyle: rect',
+    handler: (chart) => {
+      chart.data.datasets.forEach(dataset => {
+        dataset.pointStyle = 'rect';
+      });
+      chart.update();
+    }
+  },
+  {
+    name: 'pointStyle: rectRounded',
+    handler: (chart) => {
+      chart.data.datasets.forEach(dataset => {
+        dataset.pointStyle = 'rectRounded';
+      });
+      chart.update();
+    }
+  },
+  {
+    name: 'pointStyle: rectRot',
+    handler: (chart) => {
+      chart.data.datasets.forEach(dataset => {
+        dataset.pointStyle = 'rectRot';
+      });
+      chart.update();
+    }
+  },
+  {
+    name: 'pointStyle: star',
+    handler: (chart) => {
+      chart.data.datasets.forEach(dataset => {
+        dataset.pointStyle = 'star';
+      });
+      chart.update();
+    }
+  },
+  {
+    name: 'pointStyle: triangle',
+    handler: (chart) => {
+      chart.data.datasets.forEach(dataset => {
+        dataset.pointStyle = 'triangle';
+      });
+      chart.update();
+    }
+  }
+];
+// </block:actions>
+
+// <block:setup:1>
+const data = {
+  labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6'],
+  datasets: [
+    {
+      label: 'Dataset',
+      data: Utils.numbers({count: 6, min: -100, max: 100}),
+      borderColor: Utils.CHART_COLORS.red,
+      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
+      pointStyle: 'circle',
+      pointRadius: 10,
+      pointHoverRadius: 15
+    }
+  ]
+};
+// </block:setup>
+
+// <block:config:0>
+const config = {
+  type: 'line',
+  data: data,
+  options: {
+    responsive: true,
+    plugins: {
+      title: {
+        display: true,
+        text: (ctx) => 'Point Style: ' + ctx.chart.data.datasets[0].pointStyle,
+      }
+    }
+  }
+};
+// </block:config>
+
+module.exports = {
+  actions: actions,
+  config: config,
+};
+```