* @see https://github.com/chartjs/Chart.js/issues/2440#issuecomment-256461897
*/
-import defaults from '../core/core.defaults';
import Line from '../elements/element.line';
import {_boundSegment, _boundSegments} from '../helpers/helpers.segment';
import {clipArea, unclipArea} from '../helpers/helpers.canvas';
import {isArray, isFinite, valueOrDefault} from '../helpers/helpers.core';
import {_normalizeAngle} from '../helpers/helpers.math';
-defaults.set('plugins', {
- filler: {
- propagate: true
- }
-});
-
function getLineByIndex(chart, index) {
const meta = chart.getDatasetMeta(index);
const visible = meta && chart.isDatasetVisible(index);
const {line, target, scale} = meta;
const lineOpts = line.options;
const fillOption = lineOpts.fill;
- const color = lineOpts.backgroundColor || defaults.color;
+ const color = lineOpts.backgroundColor;
const {above = color, below = color} = fillOption || {};
if (target && line.points.length) {
clipArea(ctx, area);
doFill(ctx, {line, target, above, below, area, scale});
unclipArea(ctx);
}
+ },
+
+ defaults: {
+ propagate: true
}
};
import Element from '../core/core.element';
import layouts from '../core/core.layouts';
import {drawPoint} from '../helpers/helpers.canvas';
-import {callback as call, mergeIf, valueOrDefault, isNullOrUndef} from '../helpers/helpers.core';
+import {callback as call, merge, valueOrDefault, isNullOrUndef} from '../helpers/helpers.core';
import {toFont, toPadding} from '../helpers/helpers.options';
import {getRtlAdapter, overrideTextDirection, restoreTextDirection} from '../helpers/helpers.rtl';
* @typedef { import("../platform/platform.base").IEvent } IEvent
*/
-defaults.set('legend', {
- display: true,
- position: 'top',
- align: 'center',
- fullWidth: true,
- reverse: false,
- weight: 1000,
-
- // a callback that will handle
- onClick(e, legendItem, legend) {
- const index = legendItem.datasetIndex;
- const ci = legend.chart;
- if (ci.isDatasetVisible(index)) {
- ci.hide(index);
- legendItem.hidden = true;
- } else {
- ci.show(index);
- legendItem.hidden = false;
- }
- },
-
- onHover: null,
- onLeave: null,
-
- labels: {
- boxWidth: 40,
- padding: 10,
- // Generates labels shown in the legend
- // Valid properties to return:
- // text : text to display
- // fillStyle : fill of coloured box
- // strokeStyle: stroke of coloured box
- // hidden : if this legend item refers to a hidden item
- // lineCap : cap style for line
- // lineDash
- // lineDashOffset :
- // lineJoin :
- // lineWidth :
- generateLabels(chart) {
- const datasets = chart.data.datasets;
- const options = chart.options.legend || {};
- const usePointStyle = options.labels && options.labels.usePointStyle;
-
- return chart._getSortedDatasetMetas().map((meta) => {
- const style = meta.controller.getStyle(usePointStyle ? 0 : undefined);
-
- return {
- text: datasets[meta.index].label,
- fillStyle: style.backgroundColor,
- hidden: !meta.visible,
- lineCap: style.borderCapStyle,
- lineDash: style.borderDash,
- lineDashOffset: style.borderDashOffset,
- lineJoin: style.borderJoinStyle,
- lineWidth: style.borderWidth,
- strokeStyle: style.borderColor,
- pointStyle: style.pointStyle,
- rotation: style.rotation,
-
- // Below is extra data used for toggling the datasets
- datasetIndex: meta.index
- };
- }, this);
- }
- },
-
- title: {
- display: false,
- position: 'center',
- text: '',
- }
-});
-
/**
* Helper function to get the box width based on the usePointStyle option
* @param {object} labelOpts - the label options on the legend
}
}
+function resolveOptions(options) {
+ return options !== false && merge({}, [defaults.plugins.legend, options]);
+}
+
function createNewLegendAndAttach(chart, legendOpts) {
const legend = new Legend({
ctx: chart.ctx,
_element: Legend,
beforeInit(chart) {
- const legendOpts = chart.options.legend;
+ const legendOpts = resolveOptions(chart.options.legend);
if (legendOpts) {
createNewLegendAndAttach(chart, legendOpts);
// This ensures that if the legend position changes (via an option update)
// the layout system respects the change. See https://github.com/chartjs/Chart.js/issues/7527
beforeUpdate(chart) {
- const legendOpts = chart.options.legend;
+ const legendOpts = resolveOptions(chart.options.legend);
const legend = chart.legend;
if (legendOpts) {
- mergeIf(legendOpts, defaults.legend);
-
if (legend) {
layouts.configure(chart, legend, legendOpts);
legend.options = legendOpts;
if (legend) {
legend.handleEvent(e);
}
+ },
+
+ defaults: {
+ display: true,
+ position: 'top',
+ align: 'center',
+ fullWidth: true,
+ reverse: false,
+ weight: 1000,
+
+ // a callback that will handle
+ onClick(e, legendItem, legend) {
+ const index = legendItem.datasetIndex;
+ const ci = legend.chart;
+ if (ci.isDatasetVisible(index)) {
+ ci.hide(index);
+ legendItem.hidden = true;
+ } else {
+ ci.show(index);
+ legendItem.hidden = false;
+ }
+ },
+
+ onHover: null,
+ onLeave: null,
+
+ labels: {
+ boxWidth: 40,
+ padding: 10,
+ // Generates labels shown in the legend
+ // Valid properties to return:
+ // text : text to display
+ // fillStyle : fill of coloured box
+ // strokeStyle: stroke of coloured box
+ // hidden : if this legend item refers to a hidden item
+ // lineCap : cap style for line
+ // lineDash
+ // lineDashOffset :
+ // lineJoin :
+ // lineWidth :
+ generateLabels(chart) {
+ const datasets = chart.data.datasets;
+ const options = chart.options.legend || {};
+ const usePointStyle = options.labels && options.labels.usePointStyle;
+
+ return chart._getSortedDatasetMetas().map((meta) => {
+ const style = meta.controller.getStyle(usePointStyle ? 0 : undefined);
+
+ return {
+ text: datasets[meta.index].label,
+ fillStyle: style.backgroundColor,
+ hidden: !meta.visible,
+ lineCap: style.borderCapStyle,
+ lineDash: style.borderDash,
+ lineDashOffset: style.borderDashOffset,
+ lineJoin: style.borderJoinStyle,
+ lineWidth: style.borderWidth,
+ strokeStyle: style.borderColor,
+ pointStyle: style.pointStyle,
+ rotation: style.rotation,
+
+ // Below is extra data used for toggling the datasets
+ datasetIndex: meta.index
+ };
+ }, this);
+ }
+ },
+
+ title: {
+ display: false,
+ position: 'center',
+ text: '',
+ }
}
};