Doc updates for other chart types

diff --git a/docs/02-Line-Chart.md b/docs/02-Line-Chart.md
index 30f6bd613c316f7025d3679b074bbdc3ba9ffac6..bdf2e79d6c727142db1e2c221433636220c67104 100644 (file)
--- a/docs/02-Line-Chart.md
+++ b/docs/02-Line-Chart.md
@@ -42,6 +42,7 @@ yAxisID | `String` | The ID of the y axis to plot this dataset on
 fill | `Boolean` | If true, fill the area under the line
 lineTension | `Number` | Bezier curve tension of the line. Set to 0 to draw straightlines. *Note* This was renamed from 'tension' but the old name still works.
 backgroundColor | `Color` | The fill color under the line. See [Colors](#colors)
+borderWidth | `Number` | The width of the line in pixels
 borderColor | `Color` | The color of the line.
 borderCapStyle | `String` | Cap style of the line. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap)
 borderDash | `Array<Number>` | Length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash)

diff --git a/docs/03-Bar-Chart.md b/docs/03-Bar-Chart.md
index 3c2948204e501aa864e37565a53431660eef3171..32acde75ee13102d4a44c1efb0effbfcb575f627 100644 (file)
--- a/docs/03-Bar-Chart.md
+++ b/docs/03-Bar-Chart.md
@@ -22,6 +22,25 @@ var myBarChart = new Chart(ctx, {
 ```
 
 ### Data structure
+The following options can be included in a bar chart dataset to configure options for that specific dataset.
+
+Some properties can be specified as an array. If these are set to an array value, the first value applies to the first bar, the second value to the second bar, and so on.
+
+Property | Type | Usage
+--- | --- | ---
+data | `Array<Number>` | The data to plot as bars
+label | `String` | The label for the dataset which appears in the legend and tooltips
+xAxisID | `String` | The ID of the x axis to plot this dataset on
+yAxisID | `String` | The ID of the y axis to plot this dataset on
+backgroundColor | `Color or Array<Color>` | The fill color of the bars. See [Colors](#colors)
+borderColor | `Color or Array<Color>` | Bar border color
+borderWidth | `Number or Array<Number>` | Border width of bar in pixels
+borderSkipped | `String or Array<String>` | Which edge to skip drawing the border for. Options are 'bottom', 'left', 'top', and 'right'
+hoverBackgroundColor | `Color or Array<Color>` | Bar background color when hovered
+hoverBorderColor | `Color or Array<Color>` | Bar border color when hovered
+hoverBorderWidth | `Number or Array<Number>` | Border width of bar when hovered
+
+An example data object using these attributes is shown below.
 
 ```javascript
 var data = {
@@ -29,46 +48,19 @@ var data = {
        datasets: [
                {
                        label: "My First dataset",
-
-                       // The properties below allow an array to be specified to change the value of the item at the given index
-                       // String  or array - the bar color
                        backgroundColor: "rgba(255,99,132,0.2)",
-
-                       // String or array - bar stroke color
                        borderColor: "rgba(255,99,132,1)",
-
-                       // Number or array - bar border width
                        borderWidth: 1,
-
-                       // String or array - fill color when hovered
                        hoverBackgroundColor: "rgba(255,99,132,0.4)",
-
-                       // String or array - border color when hovered
                        hoverBorderColor: "rgba(255,99,132,1)",
-
-                       // The actual data
                        data: [65, 59, 80, 81, 56, 55, 40],
-
-                       // String - If specified, binds the dataset to a certain y-axis. If not specified, the first y-axis is used.
-                       yAxisID: "y-axis-0",
-               },
-               {
-                       label: "My Second dataset",
-                       backgroundColor: "rgba(54,162,235,0.2)",
-                       borderColor: "rgba(54,162,235,1)",
-                       borderWidth: 1,
-                       hoverBackgroundColor: "rgba(54,162,235,0.4)",
-                       hoverBorderColor: "rgba(54,162,235,1)",
-                       data: [28, 48, 40, 19, 86, 27, 90]
                }
        ]
 };
 ```
-The bar chart has the a very similar data structure to the line chart, and has an array of datasets, each with colours and an array of data. Again, colours are in CSS format.
+The bar chart has the a very similar data structure to the line chart, and has an array of datasets, each with colours and an array of data.
 We have an array of labels too for display. In the example, we are showing the same data as the previous line chart example.
 
-The label key on each dataset is optional, and can be used when generating a scale for the chart.
-
 ### Chart Options
 
 These are the customisation options specific to Bar charts. These options are merged with the [global chart configuration options](#getting-started-global-chart-configuration), and form the options of the chart.

diff --git a/docs/04-Radar-Chart.md b/docs/04-Radar-Chart.md
index cdf04f3956247c7a9ea145cea163cc20fac1829b..c338d11cf1cf242da3f51d3b193bf3be9eef0496 100644 (file)
--- a/docs/04-Radar-Chart.md
+++ b/docs/04-Radar-Chart.md
@@ -23,6 +23,37 @@ var myRadarChart = new Chart(ctx, {
 ```
 
 ### Data structure
+
+The following options can be included in a radar chart dataset to configure options for that specific dataset.
+
+All point* properties can be specified as an array. If these are set to an array value, the first value applies to the first point, the second value to the second point, and so on.
+
+Property | Type | Usage
+--- | --- | ---
+data | `Array<Number>` | The data to plot in a line
+label | `String` | The label for the dataset which appears in the legend and tooltips
+fill | `Boolean` | If true, fill the area under the line
+tension | `Number` | Bezier curve tension of the line. Set to 0 to draw straightlines. *Note* This was renamed from 'tension' but the old name still works.
+backgroundColor | `Color` | The fill color under the line. See [Colors](#colors)
+borderWidth | `Number` | The width of the line in pixels
+borderColor | `Color` | The color of the line.
+borderCapStyle | `String` | Cap style of the line. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap)
+borderDash | `Array<Number>` | Length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash)
+borderDashOffset | `Number` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset)
+borderJoinStyle | `String` | Line joint style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin)
+pointBorderColor | `Color or Array<Color>` | The border color for points.
+pointBackgroundColor | `Color or Array<Color>` | The fill color for points
+pointBorderWidth | `Number or Array<Number>` | The width of the point border in pixels
+pointRadius | `Number or Array<Number>` | The radius of the point shape. If set to 0, nothing is rendered. 
+pointHoverRadius | `Number or Array<Number>` | The radius of the point when hovered
+hitRadius | `Number or Array<Number>` | The pixel size of the non-displayed point that reacts to mouse events
+pointHoverBackgroundColor | `Color or Array<Color>` | Point background color when hovered
+pointHoverBorderColor | `Color or Array<Color>` | Point border color when hovered
+pointHoverBorderWidth | `Number or Array<Number>` | Border width of point when hovered
+pointStyle | `String or Array<String>` | The style of point. Options include 'circle', 'triangle', 'rect', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'
+
+An example data object using these attributes is shown below.
+
 ```javascript
 var data = {
        labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],

diff --git a/docs/05-Polar-Area-Chart.md b/docs/05-Polar-Area-Chart.md
index c3d696d87340ef0c9b555dc87e3b09fd5b6d6deb..f6a06432f516ea204f96feb3749fee0270241647 100644 (file)
--- a/docs/05-Polar-Area-Chart.md
+++ b/docs/05-Polar-Area-Chart.md
@@ -23,6 +23,23 @@ new Chart(ctx, {
 
 ### Data structure
 
+The following options can be included in a polar area chart dataset to configure options for that specific dataset.
+
+Some properties are specified as arrays. The first value applies to the first bar, the second value to the second bar, and so on.
+
+Property | Type | Usage
+--- | --- | ---
+data | `Array<Number>` | The data to plot as bars
+label | `String` | The label for the dataset which appears in the legend and tooltips
+backgroundColor | `Array<Color>` | The fill color of the arcs. See [Colors](#colors)
+borderColor | `Array<Color>` | Arc border color
+borderWidth | `Array<Number>` | Border width of arcs in pixels
+hoverBackgroundColor | `Array<Color>` | Arc background color when hovered
+hoverBorderColor | `Array<Color>` | Arc border color when hovered
+hoverBorderWidth | `Array<Number>` | Border width of arc when hovered
+
+An example data object using these attributes is shown below.
+
 ```javascript
 var data = {
        datasets: [{

diff --git a/docs/06-Pie-Doughnut-Chart.md b/docs/06-Pie-Doughnut-Chart.md
index 4252a7b488ff34a50dde517a8f7af25ded583318..00ef8f7034b519bea3cef6746e9f41626861d4dd 100644 (file)
--- a/docs/06-Pie-Doughnut-Chart.md
+++ b/docs/06-Pie-Doughnut-Chart.md
@@ -42,6 +42,19 @@ var myDoughnutChart = new Chart(ctx, {
 
 ### Data structure
 
+Property | Type | Usage
+--- | --- | ---
+data | `Array<Number>` | The data to plot as bars
+label | `String` | The label for the dataset which appears in the legend and tooltips
+backgroundColor | `Array<Color>` | The fill color of the arcs. See [Colors](#colors)
+borderColor | `Array<Color>` | Arc border color
+borderWidth | `Array<Number>` | Border width of arcs in pixels
+hoverBackgroundColor | `Array<Color>` | Arc background color when hovered
+hoverBorderColor | `Array<Color>` | Arc border color when hovered
+hoverBorderWidth | `Array<Number>` | Border width of arc when hovered
+
+An example data object using these attributes is shown below.
+
 ```javascript
 var data = {
     labels: [