From: wcatron Date: Mon, 23 Nov 2015 17:03:38 +0000 (-0500) Subject: Update options to tables, update example for bar. X-Git-Tag: 2.0.0-beta1~13^2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F1684%2Fhead;p=thirdparty%2FChart.js.git Update options to tables, update example for bar. --- diff --git a/docs/01-Scales.md b/docs/01-Scales.md index 4fd8aa204..4bd84cb7a 100644 --- a/docs/01-Scales.md +++ b/docs/01-Scales.md @@ -1,66 +1,49 @@ --- title: Getting started -anchor: getting-started +anchor: scales --- ###Scales Scales in v2.0 of Chart.js are significantly more powerful, but also different than those of v1.0. - Multiple x & y axes are now supported. -- A built-in label auto-skip feature now detects would-be overlapping ticks and labels and removes every nth label to keep things displaying normally. +- A built-in label auto-skip feature now detects would-be overlapping ticks and labels and removes every nth label to keep things displaying normally. - Scale labels Every scale extends a core scale class with the following options: -```javascript -Chart.defaults.scale = { - display: true, - - // grid line settings - gridLines: { - show: true, - color: "rgba(0, 0, 0, 0.1)", - lineWidth: 1, - drawOnChartArea: true, - drawTicks: true, - zeroLineWidth: 1, - zeroLineColor: "rgba(0,0,0,0.25)", - offsetGridLines: false, - }, - - // scale label - scaleLabel: { - fontColor: '#666', - fontFamily: 'Helvetica Neue', - fontSize: 12, - fontStyle: 'normal', - - // actual label - labelString: '', - - // display property - show: false, - }, - - // label settings - ticks: { - beginAtZero: false, - fontSize: 12, - fontStyle: "normal", - fontColor: "#666", - fontFamily: "Helvetica Neue", - maxTicksLimit: 11, - maxRotation: 90, - minRotation: 20, - mirror: false, - padding: 10, - reverse: false, - show: true, - template: "<%=value%>", - userCallback: false, - }, -}; -``` +Name | Type | Default | Description +--- |:---:| --- | --- +display | Boolean | true | If true, show the scale. +gridLines | Array | | +*gridLines*.show | Boolean | true | If true, show the grid lines. +*gridLines*.color | Color | "rgba(0, 0, 0, 0.1)" | Color of the grid lines. +*gridLines*.lineWidth | Number | 1 | Width of the grid lines in number of pixels. +*gridLines*.drawOnChartArea | Boolean | true | If true draw lines on the chart area, if false... +*gridLines*.drawTicks | Boolean | true | If true draw ticks in the axis area, if false... +*gridLines*.zeroLineWidth | Number | 1 | Width of the grid line for the first index (index 0). +*gridLines*.zeroLineColor | Color | "rgba(0, 0, 0, 0.25)" | Color of the grid line for the first index (index 0). +*gridLines*.offsetGridLines | Boolean | false | If true, offset labels from grid lines. +scaleLabel | Array | | Label for the axis. +*scaleLabel*.show | Boolean | false | Whether the label is displayed. +*scaleLabel*.labelString | String | "" | The text for the label. +*scaleLabel*.fontColor | Color | "#666" | +*scaleLabel*.fontFamily| String | "Helvetica Neue" | +*scaleLabel*.fontSize | Number | 12 | +*scaleLabel*.fontStyle | String | "normal" | +ticks | Array | | Settings for the ticks along the axis. +*ticks*.beginAtZero | Boolean | false | If true the scale will be begin at 0, if false the ticks will begin at your smallest data value. +*ticks*.fontSize | Number | 12 | +*ticks*.fontStyle | String | "normal" | +*ticks*.fontColor | Color | "#666" | +*ticks*.fontFamily | String | "Helvetica Neue" | +*ticks*.maxRotation | Number | 90 | +*ticks*.minRotation | Number | 20 | +*ticks*.mirror | Boolean | false | +*ticks*.padding | Number | 10 | +*ticks*.reverse | Boolean | false | +*ticks*.show | Boolean | true | +*ticks*.callback | Function | `function(value) { return '' + value; } ` | The `userCallback` method may be used for advanced tick customization. The following callback would display every label in scientific notation ```javascript @@ -127,9 +110,9 @@ The time scale extends the core scale class with the following tick template: // string/callback - By default, date objects are expected. You may use a pattern string from http://momentjs.com/docs/#/parsing/string-format/ to parse a time string format, or use a callback function that is passed the label, and must return a moment() instance. format: false, // string - By default, unit will automatically be detected. Override with 'week', 'month', 'year', etc. (see supported time measurements) - unit: false, + unit: false, // string - By default, no rounding is applied. To round, set to a supported time unit eg. 'week', 'month', 'year', etc. - round: false, + round: false, // string - By default, is set to the detected (or manually overridden) time unit's `display` property (see supported time measurements). To override, use a pattern string from http://momentjs.com/docs/#/displaying/format/ displayFormat: false }, @@ -209,7 +192,7 @@ The radial linear scale extends the core scale class with the following tick tem //Number - The backdrop padding to the side of the label in pixels backdropPaddingX: 2, - + //Number - Limit the maximum number of ticks maxTicksLimit: 11, }, diff --git a/docs/03-Bar-Chart.md b/docs/03-Bar-Chart.md index 74f99e7b1..c6c356b59 100644 --- a/docs/03-Bar-Chart.md +++ b/docs/03-Bar-Chart.md @@ -73,167 +73,59 @@ The label key on each dataset is optional, and can be used when generating a sca 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. -```javascript -{ - // Boolean - if true, bars stack on top of each other - stacked: false, - - hover: { - // String - We use a label hover mode since the x axis displays data by the index in the dataset - mode: "label" - }, - - scales: { - // The bar chart officially supports only 1 x-axis but uses an array to keep the API consistent. Use a scatter chart if you need multiple x axes. - xAxes: [{ - // String - type of axis to use. Should not be changed from 'dataset'. - scaleType: "dataset", // scatter should not use a dataset axis - - // Boolean - if true, show the scale - display: true, - - // String - position of the scale. possible options are "top" and "bottom" for dataset scales - position: "bottom", - - // String - id of the axis so that data can bind to it - id: "x-axis-1", // need an ID so datasets can reference the scale - - // grid line settings - gridLines: { - // Boolean - if true, show the grid lines - show: true, - - // String - color of the grid lines - color: "rgba(0, 0, 0, 0.05)", - - // Number - width of the grid lines - lineWidth: 1, - - // Boolean - if true draw lines on the chart area - drawOnChartArea: true, - - // Boolean - if true draw ticks in the axis area - drawTicks: true, - - // Number - width of the grid line for the first index (index 0) - zeroLineWidth: 1, - - // String - color of the grid line for the first index - zeroLineColor: "rgba(0,0,0,0.25)", - - // Boolean - if true, offset labels from grid lines - offsetGridLines: false, - }, - - // label settings - labels: { - // Boolean - if true show labels - show: true, - - // String - template string for labels - template: "<%=value%>", - - // Number - label font size - fontSize: 12, - - // String - label font style - fontStyle: "normal", - - // String - label font color - fontColor: "#666", - - // String - label font family - fontFamily: "Helvetica Neue", - }, - }], - yAxes: [{ - // String - type of axis. 'linear' is the default but extensions may provide other types such as logarithmic - scaleType: "linear", - - // Boolean - if true, show the scale - display: true, - - // String - position of axis. Vertical axes can have either "left" or "right" - position: "left", - - // ID of the axis for data binding - id: "y-axis-1", - - // grid line settings - gridLines: { - // Boolean - if true, show the grid lines - show: true, - - // String - color of the grid lines - color: "rgba(0, 0, 0, 0.05)", - - // Number - width of the grid lines - lineWidth: 1, - - // Boolean - if true draw lines on the chart area - drawOnChartArea: true, - - // Boolean - if true draw ticks in the axis area - drawTicks: true, - - // Number - width of the grid line representing a numerical value of 0 - zeroLineWidth: 1, - - // String - color of the grid line representing a numerical value of 0 - zeroLineColor: "rgba(0,0,0,0.25)", - }, - - // Boolean - if true ensures that the scale always has a 0 point - beginAtZero: false, - - // Object - if specified, allows the user to override the step generation algorithm. - // Contains the following values - // start: // number to start at - // stepWidth: // size of step - // steps: // number of steps - override: null, - - // label settings - labels: { - // Boolean - if true show labels - show: true, - - // String - template string for labels - template: "<%=value%>", - - // Function - if specified this is passed the tick value, index, and the array of all tick values. Returns a string that is used as the label for that value - userCallback: null, - - // Number - label font size - fontSize: 12, - - // String - label font style - fontStyle: "normal", - - // String - label font color - fontColor: "#666", - - // String - label font family - fontFamily: "Helvetica Neue", - }, - }], - }, -}; -``` +The default options for bar chart are defined in `Chart.defaults.Bar`. + +Name | Type | Default | Description +--- |:---:| --- | --- +stacked | Boolean | false | +*hover*.mode | String | "label" | Label's hover mode. "label" is used since the x axis displays data by the index in the dataset. +scales | Array | - | - +*scales*.xAxes | Array | | The bar chart officially supports only 1 x-axis but uses an array to keep the API consistent. Use a scatter chart if you need multiple x axes. +*Options for xAxes* | | | +type | String | "Category" | +display | Boolean | true | If true, show the scale. +position | String | "bottom" | Position of the scale. Options are "top" and "bottom" for dataset scales. +id | String | "x-axis-1" | Id of the axis so that data can bind to it +categoryPercentage | Number | 0.8 | Specific to bar chart. +barPercentage | Number | 0.9 | +gridLines | Array | [See Scales](#scales). | +*gridLines*.offsetGridLines | Boolean | true | +scaleLabel | Array | [See Scales](#scales). | +ticks | Array | [See Scales](#scales). | +| | | +*scales*.yAxes | Array | `[{ type: "linear" }]` | +*Options for xAxes* | | | +type | String | "linear" | +display | Boolean | true | If true, show the scale. +position | String | "left" | Position of the scale. Options are "left" and "right" for dataset scales. +id | String | "y-axis-1" | Id of the axis so that data can bind to it +gridLines | Array | [See Scales](#scales) | +scaleLabel | Array | [See Scales](#scales) | +ticks | Array | [See Scales](#scales) | You can override these for your `Chart` instance by passing a second argument into the `Bar` method as an object with the keys you want to override. For example, we could have a bar chart without a stroke on each bar by doing the following: ```javascript -new Chart(ctx).Bar({ +new Chart(ctx,{ + type:"bar", data: data, options: { - barShowStroke: false + scales: { + xAxes: [{ + stacked: true, + }], + yAxes: [{ + stacked: true + }] + } + } } }); // This will create a chart with all of the default options, merged from the global config, -// and the Bar chart defaults but this particular instance will have `barShowStroke` set to false. +// and the Bar chart defaults but this particular instance will have `stacked` set to true for +// both x and y axes. ``` We can also change these defaults values for each Bar type that is created, this object is available at `Chart.defaults.Bar`.