From a0377362d7d130428e42e8cc9fb8c8902d97636e Mon Sep 17 00:00:00 2001 From: wcatron Date: Mon, 23 Nov 2015 19:32:38 -0500 Subject: [PATCH] Update remainder of tables for radar, polar, and pie. --- docs/01-Scales.md | 1 + docs/03-Bar-Chart.md | 2 +- docs/04-Radar-Chart.md | 82 +++++++++-------------------------- docs/05-Polar-Area-Chart.md | 53 +++------------------- docs/06-Pie-Doughnut-Chart.md | 45 ++++++------------- samples/polar-area.html | 11 +++-- samples/radar.html | 8 ++-- 7 files changed, 54 insertions(+), 148 deletions(-) diff --git a/docs/01-Scales.md b/docs/01-Scales.md index 4bd84cb7a..292fa43f4 100644 --- a/docs/01-Scales.md +++ b/docs/01-Scales.md @@ -15,6 +15,7 @@ Every scale extends a core scale class with the following options: Name | Type | Default | Description --- |:---:| --- | --- display | Boolean | true | If true, show the scale. +reverse | Boolean | false | If true, reverses the scales. 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. diff --git a/docs/03-Bar-Chart.md b/docs/03-Bar-Chart.md index 24f4c0084..dc82174c5 100644 --- a/docs/03-Bar-Chart.md +++ b/docs/03-Bar-Chart.md @@ -80,7 +80,7 @@ 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. +*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. diff --git a/docs/04-Radar-Chart.md b/docs/04-Radar-Chart.md index 0c7f75e5d..2d969547c 100644 --- a/docs/04-Radar-Chart.md +++ b/docs/04-Radar-Chart.md @@ -59,77 +59,35 @@ The label key on each dataset is optional, and can be used when generating a sca These are the customisation options specific to Radar charts. These options are merged with the [global chart configuration options](#getting-started-global-chart-configuration), and form the options of the chart. +The default options for radar chart are defined in `Chart.defaults.radar`. -```javascript -{ - //Boolean - Whether to show lines for each scale point - scaleShowLine : true, - - //Boolean - Whether we show the angle lines out of the radar - angleShowLineOut : true, - - //Boolean - Whether to show labels on the scale - scaleShowLabels : false, - - // Boolean - Whether the scale should begin at zero - scaleBeginAtZero : true, - - //String - Colour of the angle line - angleLineColor : "rgba(0,0,0,.1)", - - //Number - Pixel width of the angle line - angleLineWidth : 1, - - //String - Point label font declaration - pointLabelFontFamily : "'Arial'", - - //String - Point label font weight - pointLabelFontStyle : "normal", - - //Number - Point label font size in pixels - pointLabelFontSize : 10, - - //String - Point label font colour - pointLabelFontColor : "#666", - - //Boolean - Whether to show a dot for each point - pointDot : true, - - //Number - Radius of each point dot in pixels - pointDotRadius : 3, - - //Number - Pixel width of point dot stroke - pointDotStrokeWidth : 1, - - //Number - amount extra to add to the radius to cater for hit detection outside the drawn point - pointHitDetectionRadius : 20, - - //Boolean - Whether to show a stroke for datasets - datasetStroke : true, - - //Number - Pixel width of dataset stroke - datasetStrokeWidth : 2, - - //Boolean - Whether to fill the dataset with a colour - datasetFill : true, - {% raw %} - //String - A legend template - legendTemplate : "" - {% endraw %} -} -``` - +Name | Type | Default | Description +--- | --- | --- | --- +scale | Array | [See Scales](#scales) and [Defaults for Radial Linear Scale](#getting-started-radial-linear-scale) | Options for the one scale used on the chart. Use this to style the ticks, labels, and grid. +*scale*.type | String |"radialLinear" | Contains options for the scale. +*elements*.line | Array | | Options for all line elements used on the chart, as defined in the global elements, duplicated here to show Radar chart specific defaults. +*elements.line*.tension | Number | 0 | You can override these for your `Chart` instance by passing a second argument into the `Radar` method as an object with the keys you want to override. For example, we could have a radar chart without a point for each on piece of data by doing the following: ```javascript -new Chart(ctx).Radar(data, { - pointDot: false +new Chart(ctx, { + type:"radar", + data: data, + options: { + scale: { + reverse: true, + ticks: { + beginAtZero: 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 `pointDot` set to false. +// and the Radar chart defaults but this particular instance's scale will be reversed as +// well as the ticks beginning at zero. ``` We can also change these defaults values for each Radar type that is created, this object is available at `Chart.defaults.Radar`. diff --git a/docs/05-Polar-Area-Chart.md b/docs/05-Polar-Area-Chart.md index 016a45f3c..03bff4a99 100644 --- a/docs/05-Polar-Area-Chart.md +++ b/docs/05-Polar-Area-Chart.md @@ -60,52 +60,13 @@ As you can see, for the chart data you pass in an array of objects, with a value These are the customisation options specific to Polar Area 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 - Show a backdrop to the scale label - scaleShowLabelBackdrop : true, - - //String - The colour of the label backdrop - scaleBackdropColor : "rgba(255,255,255,0.75)", - - // Boolean - Whether the scale should begin at zero - scaleBeginAtZero : true, - - //Number - The backdrop padding above & below the label in pixels - scaleBackdropPaddingY : 2, - - //Number - The backdrop padding to the side of the label in pixels - scaleBackdropPaddingX : 2, - - //Boolean - Show line for each value in the scale - scaleShowLine : true, - - //Boolean - Stroke a line around each segment in the chart - segmentShowStroke : true, - - //String - The colour of the stroke on each segment. - segmentStrokeColor : "#fff", - - //Number - The width of the stroke value in pixels - segmentStrokeWidth : 2, - - //Number - Amount of animation steps - animationSteps : 100, - - //String - Animation easing effect. - animationEasing : "easeOutBounce", - - //Boolean - Whether to animate the rotation of the chart - animateRotate : true, - - //Boolean - Whether to animate scaling the chart from the centre - animateScale : false, - {% raw %} - //String - A legend template - legendTemplate : "" - {% endraw %} -} -``` +Name | Type | Default | Description +--- | --- | --- | --- +scale | Array | [See Scales](#scales) and [Defaults for Radial Linear Scale](#getting-started-radial-linear-scale) | Options for the one scale used on the chart. Use this to style the ticks, labels, and grid. +*scale*.type | String |"radialLinear" | Contains options for the scale. +*scale*.lineArc | Boolean | true | When true, lines are circular. +*animation*.animateRotate | Boolean |true | If true, will animate the rotation of the chart. +*animation*.animateScale | Boolean | true | If true, will animate scaling the chart. You can override these for your `Chart` instance by passing a second argument into the `PolarArea` method as an object with the keys you want to override. diff --git a/docs/06-Pie-Doughnut-Chart.md b/docs/06-Pie-Doughnut-Chart.md index c1eb75469..48be9d828 100644 --- a/docs/06-Pie-Doughnut-Chart.md +++ b/docs/06-Pie-Doughnut-Chart.md @@ -71,44 +71,25 @@ For a pie chart, you must pass in an array of objects with a value and an option These are the customisation options specific to Pie & Doughnut 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 - Whether we should show a stroke on each segment - segmentShowStroke : true, - - //String - The colour of each segment stroke - segmentStrokeColor : "#fff", - - //Number - The width of each segment stroke - segmentStrokeWidth : 2, - - //Number - The percentage of the chart that we cut out of the middle - percentageInnerCutout : 50, // This is 0 for Pie charts - - //Number - Amount of animation steps - animationSteps : 100, +Name | Type | Default | Description +--- | --- | --- | --- +cutoutPercentage | Number | 50 - for doughnut, 0 - for pie | The percentage of the chart that is cut out of the middle. +scale | Array | [See Scales](#scales) and [Defaults for Radial Linear Scale](#getting-started-radial-linear-scale) | Options for the one scale used on the chart. Use this to style the ticks, labels, and grid. +*scale*.type | String |"radialLinear" | Contains options for the scale. +*scale*.lineArc | Boolean | true | When true, lines are circular. +*animation*.animateRotate | Boolean |true | If true, will animate the rotation of the chart. +*animation*.animateScale | Boolean | false | If true, will animate scaling the Doughnut from the centre. - //String - Animation easing effect - animationEasing : "easeOutBounce", - - //Boolean - Whether we animate the rotation of the Doughnut - animateRotate : true, - - //Boolean - Whether we animate scaling the Doughnut from the centre - animateScale : false, - {% raw %} - //String - A legend template - legendTemplate : "" - {% endraw %} -} -``` You can override these for your `Chart` instance by passing a second argument into the `Doughnut` method as an object with the keys you want to override. For example, we could have a doughnut chart that animates by scaling out from the centre like so: ```javascript -new Chart(ctx).Doughnut(data, { - animateScale: true +new Chart(ctx,{ + type:"doughnut", + animation:{ + animateScale:true + } }); // This will create a chart with all of the default options, merged from the global config, // and the Doughnut chart defaults but this particular instance will have `animateScale` set to `true`. diff --git a/samples/polar-area.html b/samples/polar-area.html index 9fd4428e3..de92f7b12 100644 --- a/samples/polar-area.html +++ b/samples/polar-area.html @@ -17,7 +17,7 @@

Legend

- +