From: Evert Timberg Date: Sun, 24 Apr 2016 20:28:47 +0000 (-0400) Subject: Line chart docs X-Git-Tag: 2.1.0~45^2~3 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=1ce1f0c41ade5d049b40ed321f45a8d0c65c5f1b;p=thirdparty%2FChart.js.git Line chart docs --- diff --git a/docs/02-Line-Chart.md b/docs/02-Line-Chart.md index 50aefb8fa..4bb157b6c 100644 --- a/docs/02-Line-Chart.md +++ b/docs/02-Line-Chart.md @@ -29,89 +29,60 @@ var myLineChart = Chart.Line(ctx, { ``` ### Data structure +The following options can be included in a line 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` | The data to plot in a line +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 +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) +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` | 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` | The border color for points. +pointBackgroundColor | `Color or Array` | The fill color for points +pointBorderWidth | `Number or Array` | The width of the point border in pixels +pointRadius | `Number or Array` | The radius of the point shape. If set to 0, nothing is rendered. +pointHoverRadius | `Number or Array` | The radius of the point when hovered +pointHitRadius | `Number or Array` | The pixel size of the non-displayed point that reacts to mouse events +pointHoverBackgroundColor | `Color or Array` | Point background color when hovered +pointHoverBorderColor | `Color or Array` | Point border color when hovered +pointHoverBorderWidth | `Number or Array` | Border width of point when hovered +pointStyle | `String or Array` | The style of point. + +An example data object using these attributes is shown below. ```javascript var data = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "My First dataset", - - // Boolean - if true fill the area under the line fill: false, - - // Tension - bezier curve tension of the line. Set to 0 to draw straight lines connecting points - // Used to be called "tension" but was renamed for consistency. The old option name continues to work for compatibility. lineTension: 0.1, - - // String - the color to fill the area under the line with if fill is true backgroundColor: "rgba(75,192,192,0.4)", - - // String - Line color borderColor: "rgba(75,192,192,1)", - - // String - cap style of the line. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap borderCapStyle: 'butt', - - // Array - Length and spacing of dashes. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash borderDash: [], - - // Number - Offset for line dashes. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset borderDashOffset: 0.0, - - // String - line join style. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin borderJoinStyle: 'miter', - - // The properties below allow an array to be specified to change the value of the item at the given index - - // String or Array - Point stroke color pointBorderColor: "rgba(75,192,192,1)", - - // String or Array - Point fill color pointBackgroundColor: "#fff", - - // Number or Array - Stroke width of point border pointBorderWidth: 1, - - // Number or Array - Radius of point when hovered pointHoverRadius: 5, - - // String or Array - point background color when hovered pointHoverBackgroundColor: "rgba(75,192,192,1)", - - // String or Array - Point border color when hovered pointHoverBorderColor: "rgba(220,220,220,1)", - - // Number or Array - border width of point when hovered pointHoverBorderWidth: 2, - - // Number or Array - the pixel size of the point shape. Can be set to 0 to not render a circle over the point - // Used to be called "radius" but was renamed for consistency. The old option name continues to work for compatibility. pointRadius: 1, - - // Number or Array - the pixel size of the non-displayed point that reacts to mouse hover events - // - // Used to be called "hitRadius" but was renamed for consistency. The old option name continues to work for compatibility. pointHitRadius: 10, - - // 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. First id is y-axis-0 - yAxisID: "y-axis-0", - }, - { - label: "My Second dataset", - fill: false, - backgroundColor: "rgba(255,205,86,0.4)", - borderColor: "rgba(255,205,86,1)", - pointBorderColor: "rgba(255,205,86,1)", - pointBackgroundColor: "#fff", - pointBorderWidth: 1, - pointHoverRadius: 5, - pointHoverBackgroundColor: "rgba(255,205,86,1)", - pointHoverBorderColor: "rgba(255,205,86,1)", - pointHoverBorderWidth: 2, - data: [28, 48, 40, 19, 86, 27, 90] } ] }; @@ -137,15 +108,15 @@ elements | - | - | - *elements*.point | - | - | - *elements.point*.radius | Number | `3` | Defines the size of the Point shape. Can be set to zero to skip rendering a point. scales | - | - | - -*scales*.xAxes | Array | `[{type:"category","id":"x-axis-1"}]` | Defines all of the x axes used in the chart. See the [scale documentation](#getting-started-scales) for details on the available options. +*scales*.xAxes | Array | `[{type:"category","id":"x-axis-0"}]` | Defines all of the x axes used in the chart. See the [scale documentation](#getting-started-scales) for details on the available options. *Options for xAxes* | | | type | String | "category" | As defined in ["Category"](#scales-category-scale). -id | String | "x-axis-1" | Id of the axis so that data can bind to it. +id | String | "x-axis-0" | Id of the axis so that data can bind to it. | | | - *scales*.yAxes | Array | `[{type:"linear","id":"y-axis-1"}]` | Defines all of the y axes used in the chart. See the [scale documentation](#getting-started-scales) for details on the available options. + *scales*.yAxes | Array | `[{type:"linear","id":"y-axis-0"}]` | Defines all of the y axes used in the chart. See the [scale documentation](#getting-started-scales) for details on the available options. *Options for yAxes* | | | type | String | "linear" | As defined in ["Linear"](#scales-linear-scale). - id | String | "y-axis-1" | Id of the axis so that data can bind to it. + id | String | "y-axis-0" | Id of the axis so that data can bind to it. You can override these for your `Chart` instance by passing a member `options` into the `Line` method.