]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
Update documentation of `order` (#6897)
authorJukka Kurkela <jukka.kurkela@gmail.com>
Fri, 3 Jan 2020 14:08:15 +0000 (16:08 +0200)
committerEvert Timberg <evert.timberg+github@gmail.com>
Fri, 3 Jan 2020 14:08:15 +0000 (09:08 -0500)
docs/charts/bar.md
docs/charts/bubble.md
docs/charts/line.md
docs/charts/mixed.md
docs/configuration/legend.md

index a2a40b53cbc1d8c4eaff399ee1deadddd7dd501b..ea84d45c426881bd92213f9e60a9126251ca2262 100644 (file)
@@ -88,7 +88,7 @@ the color of the bars is generally set this way.
 | ---- | ----
 | `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}`
 | `label` | The label for the dataset which appears in the legend and tooltips.
-| `order` | The drawing order of dataset. Also affects order for stacking, tooltip, and legend.
+| `order` | The drawing order of dataset. Also affects order for stacking, tooltip and legend.
 | `xAxisID` | The ID of the x axis to plot this dataset on.
 | `yAxisID` | The ID of the y axis to plot this dataset on.
 
index d3f6e281b31ab53f630596414e236ca01e169e9e..3ce77c928f8c85ea3aaec0c1c95818cc91df6068 100644 (file)
@@ -62,7 +62,7 @@ The bubble chart allows a number of properties to be specified for each dataset.
 | ---- | ----
 | `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}`
 | `label` | The label for the dataset which appears in the legend and tooltips.
-| `order` | The drawing order of dataset.
+| `order` | The drawing order of dataset. Also affects order for tooltip and legend.
 
 ### Styling
 
index be45d6769fa01bf592e3eca12942bbcb9224338a..ac141b2e117936562c2426978c2fdf302c9908f3 100644 (file)
@@ -88,7 +88,7 @@ The line chart allows a number of properties to be specified for each dataset. T
 | ---- | ----
 | `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}`
 | `label` | The label for the dataset which appears in the legend and tooltips.
-| `order` | The drawing order of dataset. Also affects order for stacking, tooltip, and legend.
+| `order` | The drawing order of dataset. Also affects order for stacking, tooltip and legend.
 | `xAxisID` | The ID of the x axis to plot this dataset on.
 | `yAxisID` | The ID of the y axis to plot this dataset on.
 
index 1bdf1fd647829d92de556c9c605674f972502777..f3b82d1ae3665208d5b2cc009ff0395073eab5d3 100644 (file)
@@ -71,7 +71,7 @@ At this point we have a chart rendering how we'd like. It's important to note th
 
 ## Drawing order
 
- By default, datasets are drawn so that first one is top-most. This can be altered by specifying `order` option to datasets. `order` defaults to `0`.
+ By default, datasets are drawn so that first one is top-most. This can be altered by specifying `order` option to datasets. `order` defaults to `0`. Note that this also affects stacking, legend and tooltip. So its essentially the same as reordering the datasets.
 
  ```javascript
 var mixedChart = new Chart(ctx, {
@@ -81,13 +81,13 @@ var mixedChart = new Chart(ctx, {
             label: 'Bar Dataset',
             data: [10, 20, 30, 40],
             // this dataset is drawn below
-            order: 1
+            order: 2
         }, {
             label: 'Line Dataset',
             data: [10, 10, 10, 10],
             type: 'line',
             // this dataset is drawn on top
-            order: 2
+            order: 1
         }],
         labels: ['January', 'February', 'March', 'April']
     },
index e6ab285e7805a0f54dcf9d639005151301ee2151..bbfe362ef044e4517b3d91f0f49e5e363da4dc6c 100644 (file)
@@ -3,6 +3,7 @@
 The chart legend displays data about the datasets that are appearing on the chart.
 
 ## Configuration options
+
 The legend configuration is passed into the `options.legend` namespace. The global options for the chart legend is defined in `Chart.defaults.global.legend`.
 
 | Name | Type | Default | Description
@@ -20,14 +21,18 @@ The legend configuration is passed into the `options.legend` namespace. The glob
 | `textDirection` | `string` | canvas' default | This will force the text direction `'rtl'|'ltr` on the canvas for rendering the legend, regardless of the css specified on the canvas
 
 ## Position
+
 Position of the legend. Options are:
+
 * `'top'`
 * `'left'`
 * `'bottom'`
 * `'right'`
 
 ## Align
+
 Alignment of the legend. Options are:
+
 * `'start'`
 * `'center'`
 * `'end'`
@@ -115,6 +120,7 @@ var chart = new Chart(ctx, {
 It can be common to want to trigger different behaviour when clicking an item in the legend. This can be easily achieved using a callback in the config object.
 
 The default legend click handler is:
+
 ```javascript
 function(e, legendItem) {
     var index = legendItem.datasetIndex;