Recommend this page to a friend! |
Classes of Jorge Castro | Gentelella BladeOne | vendors/chart.js/docs/01-Chart-Configuration.md | Download |
|
Downloadtitle: Chart Configuration anchor: chart-configurationChart.js provides a number of options for changing the behaviour of created charts. These configuration options can be changed on a per chart basis by passing in an options object when creating the chart. Alternatively, the global configuration can be changed which will be used by all charts created after that point. Creating a Chart with OptionsTo create a chart with configuration options, simply pass an object containing your configuration to the constructor. In the example below, a line chart is created and configured to not be responsive.
Global ConfigurationThis concept was introduced in Chart.js 1.0 to keep configuration DRY, and allow for changing options globally across chart types, avoiding the need to specify options for each instance, or the default for a particular chart type. Chart.js merges the options object passed to the chart with the global configuration using chart type defaults and scales defaults appropriately. This way you can be as specific as you would like in your individual chart configuration, while still changing the defaults for all chart types where applicable. The global general options are defined in The following example would set the hover mode to 'single' for all charts where this was not overridden by the chart type defaults or the options passed to the constructor on creation.
Global Font SettingsThere are 4 special global settings that can change all of the fonts on the chart. These options are in Name | Type | Default | Description --- | --- | --- | --- defaultFontColor | Color | '#666' | Default font color for all text defaultFontFamily | String | "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" | Default font family for all text defaultFontSize | Number | 12 | Default font size (in px) for text. Does not apply to radialLinear scale point labels defaultFontStyle | String | 'normal' | Default font style. Does not apply to tooltip title or footer. Does not apply to chart title Common Chart ConfigurationThe following options are applicable to all charts. The can be set on the global configuration, or they can be passed to the chart constructor. Name | Type | Default | Description
--- | --- | --- | ---
responsive | Boolean | true | Resizes when the canvas container does.
responsiveAnimationDuration | Number | 0 | Duration in milliseconds it takes to animate to new size after a resize event.
maintainAspectRatio | Boolean | true | Maintain the original canvas aspect ratio Title ConfigurationThe title configuration is passed into the Name | Type | Default | Description --- | --- | --- | --- display | Boolean | false | Display the title block position | String | 'top' | Position of the title. Only 'top' or 'bottom' are currently allowed fullWidth | Boolean | true | Marks that this box should take the full width of the canvas (pushing down other boxes) fontSize | Number | 12 | Font size inherited from global configuration fontFamily | String | "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" | Font family inherited from global configuration fontColor | Color | "#666" | Font color inherited from global configuration fontStyle | String | 'bold' | Font styling of the title. padding | Number | 10 | Number of pixels to add above and below the title text text | String | '' | Title text Example UsageThe example below would enable a title of 'Custom Chart Title' on the chart that is created.
Legend ConfigurationThe legend configuration is passed into the Name | Type | Default | Description
--- | --- | --- | ---
display | Boolean | true | Is the legend displayed
position | String | 'top' | Position of the legend. Options are 'top' or 'bottom'
fullWidth | Boolean | true | Marks that this box should take the full width of the canvas (pushing down other boxes)
onClick | Function | Legend Label ConfigurationThe legend label configuration is nested below the legend configuration using the Name | Type | Default | Description
--- | --- | --- | ---
boxWidth | Number | 40 | Width of coloured box
fontSize | Number | 12 | Font size inherited from global configuration
fontStyle | String | "normal" | Font style inherited from global configuration
fontColor | Color | "#666" | Font color inherited from global configuration
fontFamily | String | "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" | Font family inherited from global configuration
padding | Number | 10 | Padding between rows of colored boxes
generateLabels: | Function | Legend Item InterfaceItems passed to the legend
ExampleThe following example will create a chart with the legend enabled and turn all of the text red in color.
Tooltip ConfigurationThe title configuration is passed into the Name | Type | Default | Description
--- | --- | --- | ---
enabled | Boolean | true | Are tooltips
custom | Function | null | See section below
mode | String | 'single' | Sets which elements appear in the tooltip. Acceptable options are Tooltip CallbacksThe tooltip label configuration is nested below the tooltip configuration using the All functions are called with the same arguments: a tooltip item and the data object passed to the chart. All functions must return either a string or an array of strings. Arrays of strings are treated as multiple lines of text. Callback | Arguments | Description
--- | --- | ---
beforeTitle | Tooltip Item InterfaceThe tooltip items passed to the tooltip callbacks implement the following interface.
Hover ConfigurationThe hover configuration is passed into the Name | Type | Default | Description
--- | --- | --- | ---
mode | String | 'single' | Sets which elements hover. Acceptable options are Animation ConfigurationThe following animation options are available. The global options for are defined in Name | Type | Default | Description
--- |:---:| --- | ---
duration | Number | 1000 | The number of milliseconds an animation takes.
easing | String | "easeOutQuart" | Easing function to use.
onProgress | Function | none | Callback called on each step of an animation. Passed a single argument, an object, containing the chart instance and an object with details of the animation.
onComplete | Function | none | Callback called at the end of an animation. Passed the same arguments as Animation CallbacksThe
Animation ObjectThe animation object passed to the callbacks is of type
Element ConfigurationThe global options for elements are defined in Options can be configured for four different types of elements; arc, lines, points, and rectangles. When set, these options apply to all objects of that type unless specifically overridden by the configuration attached to a dataset. Arc ConfigurationArcs are used in the polar area, doughnut and pie charts. They can be configured with the following options. The global arc options are stored in Name | Type | Default | Description --- | --- | --- | --- backgroundColor | Color | 'rgba(0,0,0,0.1)' | Default fill color for arcs. Inherited from the global default borderColor | Color | '#fff' | Default stroke color for arcs borderWidth | Number | 2 | Default stroke width for arcs Line ConfigurationLine elements are used to represent the line in a line chart. The global line options are stored in Name | Type | Default | Description
--- | --- | --- | ---
tension | Number | 0.4 | Default bezier curve tension. Set to Point ConfigurationPoint elements are used to represent the points in a line chart or a bubble chart. The global point options are stored in Name | Type | Default | Description --- | --- | --- | --- radius | Number | 3 | Default point radius pointStyle | String | 'circle' | Default point style backgroundColor | Color | 'rgba(0,0,0,0.1)' | Default point fill color borderWidth | Number | 1 | Default point stroke width borderColor | Color | 'rgba(0,0,0,0.1)' | Default point stroke color hitRadius | Number | 1 | Extra radius added to point radius for hit detection hoverRadius | Number | 4 | Default point radius when hovered hoverBorderWidth | Number | 1 | Default stroke width when hovered Rectangle ConfigurationRectangle elements are used to represent the bars in a bar chart. The global rectangle options are stored in Name | Type | Default | Description
--- | --- | --- | ---
backgroundColor | Color | 'rgba(0,0,0,0.1)' | Default bar fill color
borderWidth | Number | 0 | Default bar stroke width
borderColor | Color | 'rgba(0,0,0,0.1)' | Default bar stroke color
borderSkipped | String | 'bottom' | Default skipped (excluded) border for rectangle. Can be one of ColorsWhen supplying colors to Chart options, you can use a number of formats. You can specify the color as a string in hexadecimal, RGB, or HSL notations. If a color is needed, but not specified, Chart.js will use the global default color. This color is stored at You can also pass a CanvasGradient object. You will need to create this before passing to the chart, but using it you can achieve some interesting effects. The final option is to pass a CanvasPattern object. For example, if you wanted to fill a dataset with a pattern from an image you could do the following.
|