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.
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.
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 : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
- {% 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`.
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 : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
- {% 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.
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 : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
- {% 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`.
<div>
<h3>Legend</h3>
<div id="legendContainer">
-
+
</div>
</div>
<script>
options: {
responsive: true,
scale: {
- beginAtZero: true,
- reverse: false
- }
+ ticks: {
+ beginAtZero: true
+ },
+ reverse: false
+ },
+ animateRotate:false
}
};
<div>
<h3>Legend</h3>
<div id="legendContainer">
-
+
</div>
</div>
<script>
},
options: {
scale: {
- beginAtZero: true,
- reverse: false
+ reverse: true,
+ ticks: {
+ beginAtZero: true
+ }
}
}
};
projects / thirdparty / Chart.js.git / commitdiff
