chart.js-plugin-labels-dv - npm Package Compare versions

+2

dist/esm/index.js

		export * from './src/chart-label';
		//# sourceMappingURL=index.js.map

+1

dist/esm/index.js.map

{"version":3,"file":"index.js","sourceRoot":"","sources":["../../index.js"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

+493

dist/esm/src/chart-label.js

		import { fontString } from 'chart.js/helpers';
		var LabelPosition;
		(function (LabelPosition) {
		LabelPosition["OUTSIDE"] = "outside";
		LabelPosition["BORDER"] = "border";
		LabelPosition["DEFAULT"] = "default";
		})(LabelPosition \|\| (LabelPosition = {}));
		var EMPTY_LINE_SEPARATOR = '\n';
		var SUPPORTED_TYPES = ['pie', 'doughnut', 'polarArea', 'bar'];
		var SUPPORTED_TYPES_MAP = SUPPORTED_TYPES.reduce(function (acc, id) {
		acc[id] = true;
		return acc;
		}, {});
		var isAllowedType = function (type) { return SUPPORTED_TYPES_MAP[type]; };
		var isPluginsLabelsDefined = function (options) {
		var _a, _b, _c, _d, _e;
		var chartConfig = (_c = (_b = (_a = options === null \|\| options === void 0 ? void 0 : options._context) === null \|\| _a === void 0 ? void 0 : _a.chart) === null \|\| _b === void 0 ? void 0 : _b.config) === null \|\| _c === void 0 ? void 0 : _c._config;
		return !!((_e = (_d = chartConfig === null \|\| chartConfig === void 0 ? void 0 : chartConfig.options) === null \|\| _d === void 0 ? void 0 : _d.plugins) === null \|\| _e === void 0 ? void 0 : _e.labels);
		};
		export var PLUGIN_ID = 'labels';
		export var getChartLabelPlugin = function () { return ({
		id: PLUGIN_ID,
		beforeDatasetsUpdate: function (chart, args, options) {
		if (!isAllowedType(chart.config.type) \|\| !isPluginsLabelsDefined(options)) {
		return;
		}
		if (!options.length) {
		options = [options];
		}
		var count = options.length;
		if (!chart._labels \|\| count !== chart._labels.length) {
		chart._labels = options.map(function () {
		return new ChartLabel();
		});
		}
		var someOutside = false;
		var maxPadding = 0;
		for (var i = 0; i < count; ++i) {
		var label = chart._labels[i];
		label.setup(chart, options[i]);
		if (label.options.position === LabelPosition.OUTSIDE) {
		someOutside = true;
		var padding = label.options.fontSize * 1.5 + label.options.outsidePadding;
		if (padding > maxPadding) {
		maxPadding = padding;
		}
		}
		}
		if (someOutside) {
		chart.chartArea.top += maxPadding;
		chart.chartArea.bottom -= maxPadding;
		}
		},
		afterDatasetUpdate: function (chart, args, options) {
		var _a;
		if (!isAllowedType(chart.config.type) \|\| !isPluginsLabelsDefined(options)) {
		return;
		}
		(_a = chart._labels) === null \|\| _a === void 0 ? void 0 : _a.forEach(function (label) {
		label.args[args.index] = args;
		});
		},
		beforeDraw: function (chart, args, options) {
		var _a;
		if (!isAllowedType(chart.config.type) \|\| !isPluginsLabelsDefined(options)) {
		return;
		}
		(_a = chart._labels) === null \|\| _a === void 0 ? void 0 : _a.forEach(function (label) {
		label.barTotalPercentage = {};
		});
		},
		afterDatasetsDraw: function (chart, args, options) {
		var _a;
		if (!isAllowedType(chart.config.type) \|\| !isPluginsLabelsDefined(options)) {
		return;
		}
		(_a = chart._labels) === null \|\| _a === void 0 ? void 0 : _a.forEach(function (label) {
		label.render();
		});
		}
		}); };
		var ChartLabel = (function () {
		function ChartLabel() {
		}
		ChartLabel.prototype.setup = function (chart, options) {
		this.chart = chart;
		this.ctx = chart.ctx;
		this.args = {};
		this.barTotal = {};
		var chartOptions = chart.config.options;
		this.options = Object.assign({
		position: LabelPosition.DEFAULT,
		precision: 0,
		fontSize: chartOptions.font ? chartOptions.font.size : 12,
		fontColor: chartOptions.color \|\| '#333333',
		fontStyle: chartOptions.font ? chartOptions.font.style : 'normal',
		fontFamily: chartOptions.font
		? chartOptions.font.family
		: '\'Helvetica Neue\', \'Helvetica\', \'Arial\', sans-serif',
		shadowOffsetX: 3,
		shadowOffsetY: 3,
		shadowColor: 'rgba(0,0,0,0.3)',
		shadowBlur: 6,
		images: [],
		outsidePadding: 2,
		textMargin: 2,
		overlap: true
		}, options);
		var config = chart === null \|\| chart === void 0 ? void 0 : chart.config;
		if (config.type === 'bar') {
		this.options.position = LabelPosition.DEFAULT;
		this.options.arc = false;
		this.options.overlap = true;
		}
		};
		ChartLabel.prototype.render = function () {
		var _this = this;
		this.labelBounds = [];
		this.chart.data.datasets.forEach(function (d, i) {
		return _this.renderToDataset.bind(_this)(d, i);
		});
		};
		ChartLabel.prototype.renderToDataset = function (dataset, index) {
		var _this = this;
		this.totalPercentage = 0;
		this.total = null;
		var arg = this.args[index];
		arg.meta.data.forEach(function (element, index) {
		return _this.renderToElement.bind(_this)(dataset, arg, element, index);
		});
		};
		ChartLabel.prototype.renderToElement = function (dataset, arg, element, index) {
		if (!this.shouldRenderToElement(arg.meta, element)) {
		return;
		}
		this.percentage = null;
		var label = this.getLabel(dataset, element, index);
		if (!label) {
		return;
		}
		var ctx = this.ctx;
		ctx.save();
		var font = fontString(this.options.fontSize, this.options.fontStyle, this.options.fontFamily);
		if (font) {
		ctx.font = font;
		}
		var renderInfo = this.getRenderInfo(element, label);
		if (!this.drawable(element, label, renderInfo)) {
		ctx.restore();
		return;
		}
		ctx.beginPath();
		ctx.fillStyle = this.getFontColor(dataset, element, index);
		this.renderLabel(label, renderInfo);
		ctx.restore();
		};
		ChartLabel.prototype.renderLabel = function (label, renderInfo) {
		return this.options.arc
		? this.renderArcLabel(label, renderInfo)
		: this.renderBaseLabel(label, renderInfo);
		};
		ChartLabel.prototype.renderBaseLabel = function (label, position) {
		var ctx = this.ctx;
		if (typeof label === 'object') {
		ctx.drawImage(label, position.x - label.width / 2, position.y - label.height / 2, label.width, label.height);
		return;
		}
		ctx.save();
		ctx.textBaseline = 'top';
		ctx.textAlign = 'center';
		if (this.options.textShadow) {
		ctx.shadowOffsetX = this.options.shadowOffsetX;
		ctx.shadowOffsetY = this.options.shadowOffsetY;
		ctx.shadowColor = this.options.shadowColor;
		ctx.shadowBlur = this.options.shadowBlur;
		}
		var lines = label.split(EMPTY_LINE_SEPARATOR);
		for (var i = 0; i < lines.length; i++) {
		var y = position.y -
		(this.options.fontSize / 2) * lines.length +
		this.options.fontSize * i;
		ctx.fillText(lines[i], position.x, y);
		}
		ctx.restore();
		};
		ChartLabel.prototype.renderArcLabel = function (label, renderInfo) {
		var ctx = this.ctx;
		var radius = renderInfo.radius;
		var view = renderInfo.view;
		ctx.save();
		ctx.translate(view.x, view.y);
		if (typeof label === 'string') {
		ctx.rotate(renderInfo.startAngle);
		ctx.textBaseline = 'middle';
		ctx.textAlign = 'left';
		var max = 0;
		var lines = label.split(EMPTY_LINE_SEPARATOR);
		var widths = [];
		var offset = this.options.position === LabelPosition.BORDER
		? ((lines.length - 1) * this.options.fontSize) / 2
		: 0;
		for (var j = 0; j < lines.length; ++j) {
		var metrics = this.ctx.measureText(lines[j]);
		if (metrics.width > max) {
		max = metrics.width;
		}
		widths.push(metrics.width);
		}
		for (var j = 0; j < lines.length; ++j) {
		var line = lines[j];
		var y = (lines.length - 1 - j) * -this.options.fontSize + offset;
		ctx.save();
		var padding = (max - widths[j]) / 2;
		ctx.rotate(padding / radius);
		for (var i = 0; i < line.length; i++) {
		var char = line.charAt(i);
		var metrics = this.ctx.measureText(char);
		ctx.save();
		ctx.translate(0, -1 * radius);
		ctx.fillText(char, 0, y);
		ctx.restore();
		ctx.rotate(metrics.width / radius);
		}
		ctx.restore();
		}
		}
		else {
		ctx.rotate((view.startAngle + Math.PI / 2 + renderInfo.endAngle) / 2);
		ctx.translate(0, -1 * radius);
		this.renderLabel(label, { x: 0, y: 0 });
		}
		ctx.restore();
		};
		ChartLabel.prototype.shouldRenderToElement = function (meta, element) {
		return (!meta.hidden &&
		(this.options.showZero \|\| this.isChartType(this.chart, 'polarArea')
		? element.outerRadius !== 0
		: element.circumference !== 0));
		};
		ChartLabel.prototype.getLabel = function (dataset, element, index) {
		var label;
		if (typeof this.options.render === 'function') {
		label = this.options.render({
		label: this.chart.config.data.labels[index],
		value: dataset.data[index],
		percentage: this.getPercentage(dataset, element, index),
		dataset: dataset,
		index: index
		});
		}
		else {
		switch (this.options.render) {
		case 'value':
		label = dataset.data[index];
		break;
		case 'label':
		label = this.chart.config.data.labels[index];
		break;
		case 'image':
		label = this.options.images[index]
		? this.loadImage(this.options.images[index])
		: '';
		break;
		case 'percentage':
		default:
		label = this.getPercentage(dataset, element, index) + '%';
		break;
		}
		}
		if (typeof label === 'object') {
		label = this.loadImage(label);
		}
		else if (label) {
		label = label.toString();
		}
		return label;
		};
		ChartLabel.prototype.getFontColor = function (dataset, element, index) {
		var fontColor = this.options.fontColor;
		if (typeof fontColor === 'function') {
		fontColor = fontColor({
		label: this.chart.config.data.labels[index],
		value: dataset.data[index],
		percentage: this.getPercentage(dataset, element, index),
		backgroundColor: dataset.backgroundColor[index],
		dataset: dataset,
		index: index
		});
		}
		else if (typeof fontColor !== 'string') {
		fontColor = fontColor[index] \|\| this.chart.config.options.color;
		}
		return fontColor;
		};
		ChartLabel.prototype.getPercentage = function (dataset, element, index) {
		if (this.percentage) {
		return this.percentage;
		}
		var percentage;
		if (this.isChartType(this.chart, 'polarArea') \|\|
		this.isChartType(this.chart, 'doughnut') \|\|
		this.isChartType(this.chart, 'pie')) {
		if (!this.total) {
		this.total = 0;
		for (var i = 0; i < dataset.data.length; ++i) {
		this.total += dataset.data[i];
		}
		}
		percentage = (dataset.data[index] / this.total) * 100;
		}
		else if (this.isChartType(this.chart, 'bar')) {
		if (!this.barTotal[index]) {
		this.barTotal[index] = 0;
		for (var i = 0; i < this.chart.data.datasets.length; ++i) {
		this.barTotal[index] += this.chart.data.datasets[i].data[index];
		}
		}
		percentage = (dataset.data[index] / this.barTotal[index]) * 100;
		}
		else {
		var circumference = this.chart.config.options.circumference;
		percentage = (element.circumference / circumference) * 100;
		}
		percentage = parseFloat(percentage.toFixed(this.options.precision));
		if (!this.options.showActualPercentages) {
		if (this.isChartType(this.chart, 'bar')) {
		this.totalPercentage = this.barTotalPercentage[index] \|\| 0;
		}
		this.totalPercentage += percentage;
		if (this.totalPercentage > 100) {
		percentage -= this.totalPercentage - 100;
		percentage = parseFloat(percentage.toFixed(this.options.precision));
		}
		if (this.isChartType(this.chart, 'bar')) {
		this.barTotalPercentage[index] = this.totalPercentage;
		}
		}
		this.percentage = percentage;
		return percentage;
		};
		ChartLabel.prototype.getRenderInfo = function (element, label) {
		if (this.isChartType(this.chart, 'bar')) {
		return this.getBarRenderInfo(element, label);
		}
		else {
		return this.options.arc
		? this.getArcRenderInfo(element, label)
		: this.getBaseRenderInfo(element, label);
		}
		};
		ChartLabel.prototype.getBaseRenderInfo = function (element, label) {
		if (this.options.position === LabelPosition.OUTSIDE \|\|
		this.options.position === LabelPosition.BORDER) {
		var rangeFromCentre = void 0;
		var view = element;
		var centreAngle = view.startAngle + (view.endAngle - view.startAngle) / 2;
		var innerRadius = view.outerRadius / 2;
		if (this.options.position === LabelPosition.BORDER) {
		rangeFromCentre = (view.outerRadius - innerRadius) / 2 + innerRadius;
		}
		else if (this.options.position === LabelPosition.OUTSIDE) {
		rangeFromCentre =
		view.outerRadius -
		innerRadius +
		innerRadius +
		this.options.textMargin;
		}
		var renderInfo = {
		x: view.x + Math.cos(centreAngle) * rangeFromCentre,
		y: view.y + Math.sin(centreAngle) * rangeFromCentre
		};
		if (this.options.position === LabelPosition.OUTSIDE) {
		var offset = this.options.textMargin + this.measureLabel(label).width / 2;
		renderInfo.x += renderInfo.x < view.x ? -offset : offset;
		}
		return renderInfo;
		}
		else {
		return element.tooltipPosition();
		}
		};
		ChartLabel.prototype.getArcRenderInfo = function (element, label) {
		var radius;
		var view = element;
		if (this.options.position === LabelPosition.OUTSIDE) {
		radius =
		view.outerRadius + this.options.fontSize + this.options.textMargin;
		}
		else if (this.options.position === LabelPosition.BORDER) {
		radius = (view.outerRadius / 2 + view.outerRadius) / 2;
		}
		else {
		radius = (view.innerRadius + view.outerRadius) / 2;
		}
		var startAngle = view.startAngle, endAngle = view.endAngle;
		var totalAngle = endAngle - startAngle;
		startAngle += Math.PI / 2;
		endAngle += Math.PI / 2;
		var metrics = this.measureLabel(label);
		startAngle += (endAngle - (metrics.width / radius + startAngle)) / 2;
		return { radius: radius, startAngle: startAngle, endAngle: endAngle, totalAngle: totalAngle, view: view };
		};
		ChartLabel.prototype.getBarRenderInfo = function (element, label) {
		var renderInfo = element.tooltipPosition();
		renderInfo.y -=
		this.measureLabel(label).height / 2 + this.options.textMargin;
		return renderInfo;
		};
		ChartLabel.prototype.outsideInRange = function (left, right, top, bottom) {
		var labelBounds = this.labelBounds;
		for (var i = 0; i < labelBounds.length; ++i) {
		var bound = labelBounds[i];
		var potins = [
		[left, top],
		[left, bottom],
		[right, top],
		[right, bottom],
		];
		for (var j = 0; j < potins.length; ++j) {
		var x = potins[j][0];
		var y = potins[j][1];
		if (x >= bound.left &&
		x <= bound.right &&
		y >= bound.top &&
		y <= bound.bottom) {
		return false;
		}
		}
		potins = [
		[bound.left, bound.top],
		[bound.left, bound.bottom],
		[bound.right, bound.top],
		[bound.right, bound.bottom],
		];
		for (var j = 0; j < potins.length; ++j) {
		var x = potins[j][0];
		var y = potins[j][1];
		if (x >= left && x <= right && y >= top && y <= bottom) {
		return false;
		}
		}
		}
		labelBounds.push({ left: left, right: right, top: top, bottom: bottom });
		return true;
		};
		ChartLabel.prototype.drawable = function (element, label, renderInfo) {
		if (this.options.overlap) {
		return true;
		}
		if (this.options.arc) {
		return (renderInfo.endAngle - renderInfo.startAngle <= renderInfo.totalAngle);
		}
		var metrics = this.measureLabel(label);
		var left = renderInfo.x - metrics.width / 2;
		var right = renderInfo.x + metrics.width / 2;
		var top = renderInfo.y - metrics.height / 2;
		var bottom = renderInfo.y + metrics.height / 2;
		if (this.options.position === LabelPosition.OUTSIDE) {
		return this.outsideInRange(left, right, top, bottom);
		}
		return (element.inRange(left, top) &&
		element.inRange(left, bottom) &&
		element.inRange(right, top) &&
		element.inRange(right, bottom));
		};
		ChartLabel.prototype.measureLabel = function (label) {
		var _this = this;
		if (typeof label === 'object') {
		return { width: label.width, height: label.height };
		}
		var lines = label.split(EMPTY_LINE_SEPARATOR);
		var width = lines.reduce(function (acc, item) {
		var result = _this.ctx.measureText(item);
		return result.width > acc ? result.width : acc;
		}, 0);
		var height = this.options.fontSize * lines.length;
		return { width: width, height: height };
		};
		ChartLabel.prototype.loadImage = function (imgObject) {
		var image = new Image();
		image.src = imgObject.src;
		image.width = imgObject.width;
		image.height = imgObject.height;
		return image;
		};
		ChartLabel.prototype.isChartType = function (chart, type) {
		var config = chart === null \|\| chart === void 0 ? void 0 : chart.config;
		return (config === null \|\| config === void 0 ? void 0 : config.type) === type;
		};
		return ChartLabel;
		}());
		export { ChartLabel };
		//# sourceMappingURL=chart-label.js.map

+1

dist/esm/src/chart-label.js.map

+473

dist/esm/src/chartjs-plugin-labels.js

		(function () {
		'use strict';
		if (typeof Chart === 'undefined') {
		console.error('Cannot find Chart object.');
		return;
		}
		var helpers = Chart.helpers;
		if (typeof Object.assign !== 'function') {
		Object.assign = function (target) {
		if (!target) {
		throw new TypeError('Cannot convert undefined or null to object');
		}
		var to = Object(target);
		for (var index = 1; index < arguments.length; index++) {
		var nextSource = arguments[index];
		if (nextSource) {
		for (var nextKey in nextSource) {
		if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
		to[nextKey] = nextSource[nextKey];
		}
		}
		}
		}
		return to;
		};
		}
		var SUPPORTED_TYPES = {};
		['pie', 'doughnut', 'polarArea', 'bar'].forEach(function (t) {
		SUPPORTED_TYPES[t] = true;
		});
		function Label() {
		this.renderToDataset = this.renderToDataset.bind(this);
		}
		Label.prototype.setup = function (chart, options) {
		this.chart = chart;
		this.ctx = chart.ctx;
		this.args = {};
		this.barTotal = {};
		var chartOptions = chart.config.options;
		this.options = Object.assign({
		position: 'default',
		precision: 0,
		fontSize: chartOptions.font ? chartOptions.font.size : 12,
		fontColor: chartOptions.color \|\| '#333333',
		fontStyle: chartOptions.font ? chartOptions.font.style : 'normal',
		fontFamily: chartOptions.font ? chartOptions.font.family : '\'Helvetica Neue\', \'Helvetica\', \'Arial\', sans-serif',
		shadowOffsetX: 3,
		shadowOffsetY: 3,
		shadowColor: 'rgba(0,0,0,0.3)',
		shadowBlur: 6,
		images: [],
		outsidePadding: 2,
		textMargin: 2,
		overlap: true
		}, options);
		if (chart.config.type === 'bar') {
		this.options.position = 'default';
		this.options.arc = false;
		this.options.overlap = true;
		}
		};
		Label.prototype.render = function () {
		this.labelBounds = [];
		this.chart.data.datasets.forEach(this.renderToDataset);
		};
		Label.prototype.renderToDataset = function (dataset, index) {
		this.totalPercentage = 0;
		this.total = null;
		var arg = this.args[index];
		arg.meta.data.forEach(function (element, index) {
		this.renderToElement(dataset, arg, element, index);
		}.bind(this));
		};
		Label.prototype.renderToElement = function (dataset, arg, element, index) {
		if (!this.shouldRenderToElement(arg.meta, element)) {
		return;
		}
		this.percentage = null;
		var label = this.getLabel(dataset, element, index);
		if (!label) {
		return;
		}
		var ctx = this.ctx;
		ctx.save();
		ctx.font = helpers.fontString(this.options.fontSize, this.options.fontStyle, this.options.fontFamily);
		var renderInfo = this.getRenderInfo(element, label);
		if (!this.drawable(element, label, renderInfo)) {
		ctx.restore();
		return;
		}
		ctx.beginPath();
		ctx.fillStyle = this.getFontColor(dataset, element, index);
		this.renderLabel(label, renderInfo);
		ctx.restore();
		};
		Label.prototype.renderLabel = function (label, renderInfo) {
		return this.options.arc ? this.renderArcLabel(label, renderInfo) : this.renderBaseLabel(label, renderInfo);
		};
		Label.prototype.renderBaseLabel = function (label, position) {
		var ctx = this.ctx;
		if (typeof label === 'object') {
		ctx.drawImage(label, position.x - label.width / 2, position.y - label.height / 2, label.width, label.height);
		}
		else {
		ctx.save();
		ctx.textBaseline = 'top';
		ctx.textAlign = 'center';
		if (this.options.textShadow) {
		ctx.shadowOffsetX = this.options.shadowOffsetX;
		ctx.shadowOffsetY = this.options.shadowOffsetY;
		ctx.shadowColor = this.options.shadowColor;
		ctx.shadowBlur = this.options.shadowBlur;
		}
		var lines = label.split('\n');
		for (var i = 0; i < lines.length; i++) {
		var y = position.y - this.options.fontSize / 2 * lines.length + this.options.fontSize * i;
		ctx.fillText(lines[i], position.x, y);
		}
		ctx.restore();
		}
		};
		Label.prototype.renderArcLabel = function (label, renderInfo) {
		var ctx = this.ctx, radius = renderInfo.radius, view = renderInfo.view;
		ctx.save();
		ctx.translate(view.x, view.y);
		if (typeof label === 'string') {
		ctx.rotate(renderInfo.startAngle);
		ctx.textBaseline = 'middle';
		ctx.textAlign = 'left';
		var lines = label.split('\n');
		var max = 0;
		var widths = [];
		var offset = 0;
		if (this.options.position === 'border') {
		offset = (lines.length - 1) * this.options.fontSize / 2;
		}
		var mertrics = void 0;
		for (var j = 0; j < lines.length; ++j) {
		mertrics = ctx.measureText(lines[j]);
		if (mertrics.width > max) {
		max = mertrics.width;
		}
		widths.push(mertrics.width);
		}
		for (var j = 0; j < lines.length; ++j) {
		var line = lines[j];
		var y = (lines.length - 1 - j) * -this.options.fontSize + offset;
		ctx.save();
		var padding = (max - widths[j]) / 2;
		ctx.rotate(padding / radius);
		for (var i = 0; i < line.length; i++) {
		var char = line.charAt(i);
		mertrics = ctx.measureText(char);
		ctx.save();
		ctx.translate(0, -1 * radius);
		ctx.fillText(char, 0, y);
		ctx.restore();
		ctx.rotate(mertrics.width / radius);
		}
		ctx.restore();
		}
		}
		else {
		ctx.rotate((view.startAngle + Math.PI / 2 + renderInfo.endAngle) / 2);
		ctx.translate(0, -1 * radius);
		this.renderLabel(label, { x: 0, y: 0 });
		}
		ctx.restore();
		};
		Label.prototype.shouldRenderToElement = function (meta, element) {
		return !meta.hidden && (this.options.showZero \|\|
		this.chart.config.type === 'polarArea' ? element.outerRadius !== 0 : element.circumference !== 0);
		};
		Label.prototype.getLabel = function (dataset, element, index) {
		var label;
		if (typeof this.options.render === 'function') {
		label = this.options.render({
		label: this.chart.config.data.labels[index],
		value: dataset.data[index],
		percentage: this.getPercentage(dataset, element, index),
		dataset: dataset,
		index: index
		});
		}
		else {
		switch (this.options.render) {
		case 'value':
		label = dataset.data[index];
		break;
		case 'label':
		label = this.chart.config.data.labels[index];
		break;
		case 'image':
		label = this.options.images[index] ? this.loadImage(this.options.images[index]) : '';
		break;
		case 'percentage':
		default:
		label = this.getPercentage(dataset, element, index) + '%';
		break;
		}
		}
		if (typeof label === 'object') {
		label = this.loadImage(label);
		}
		else if (label) {
		label = label.toString();
		}
		return label;
		};
		Label.prototype.getFontColor = function (dataset, element, index) {
		var fontColor = this.options.fontColor;
		if (typeof fontColor === 'function') {
		fontColor = fontColor({
		label: this.chart.config.data.labels[index],
		value: dataset.data[index],
		percentage: this.getPercentage(dataset, element, index),
		backgroundColor: dataset.backgroundColor[index],
		dataset: dataset,
		index: index
		});
		}
		else if (typeof fontColor !== 'string') {
		fontColor = fontColor[index] \|\| this.chart.config.options.color;
		}
		return fontColor;
		};
		Label.prototype.getPercentage = function (dataset, element, index) {
		if (this.percentage) {
		return this.percentage;
		}
		var percentage;
		if (this.chart.config.type === 'polarArea' \|\| this.chart.config.type === 'doughnut' \|\| this.chart.config.type === 'pie') {
		if (!this.total) {
		this.total = 0;
		for (var i = 0; i < dataset.data.length; ++i) {
		this.total += dataset.data[i];
		}
		}
		percentage = dataset.data[index] / this.total * 100;
		}
		else if (this.chart.config.type === 'bar') {
		if (!this.barTotal[index]) {
		this.barTotal[index] = 0;
		for (var i = 0; i < this.chart.data.datasets.length; ++i) {
		this.barTotal[index] += this.chart.data.datasets[i].data[index];
		}
		}
		percentage = dataset.data[index] / this.barTotal[index] * 100;
		}
		else {
		percentage = element.circumference / this.chart.config.options.circumference * 100;
		}
		percentage = parseFloat(percentage.toFixed(this.options.precision));
		if (!this.options.showActualPercentages) {
		if (this.chart.config.type === 'bar') {
		this.totalPercentage = this.barTotalPercentage[index] \|\| 0;
		}
		this.totalPercentage += percentage;
		if (this.totalPercentage > 100) {
		percentage -= this.totalPercentage - 100;
		percentage = parseFloat(percentage.toFixed(this.options.precision));
		}
		if (this.chart.config.type === 'bar') {
		this.barTotalPercentage[index] = this.totalPercentage;
		}
		}
		this.percentage = percentage;
		return percentage;
		};
		Label.prototype.getRenderInfo = function (element, label) {
		if (this.chart.config.type === 'bar') {
		return this.getBarRenderInfo(element, label);
		}
		else {
		return this.options.arc ? this.getArcRenderInfo(element, label) : this.getBaseRenderInfo(element, label);
		}
		};
		Label.prototype.getBaseRenderInfo = function (element, label) {
		if (this.options.position === 'outside' \|\| this.options.position === 'border') {
		var renderInfo = {};
		var rangeFromCentre = void 0;
		var view = element;
		var centreAngle = view.startAngle + (view.endAngle - view.startAngle) / 2;
		var innerRadius = view.outerRadius / 2;
		if (this.options.position === 'border') {
		rangeFromCentre = (view.outerRadius - innerRadius) / 2 + innerRadius;
		}
		else if (this.options.position === 'outside') {
		rangeFromCentre = (view.outerRadius - innerRadius) + innerRadius + this.options.textMargin;
		}
		renderInfo = {
		x: view.x + (Math.cos(centreAngle) * rangeFromCentre),
		y: view.y + (Math.sin(centreAngle) * rangeFromCentre)
		};
		if (this.options.position === 'outside') {
		var offset = this.options.textMargin + this.measureLabel(label).width / 2;
		renderInfo.x += renderInfo.x < view.x ? -offset : offset;
		}
		return renderInfo;
		}
		else {
		return element.tooltipPosition();
		}
		};
		Label.prototype.getArcRenderInfo = function (element, label) {
		var radius;
		var view = element;
		if (this.options.position === 'outside') {
		radius = view.outerRadius + this.options.fontSize + this.options.textMargin;
		}
		else if (this.options.position === 'border') {
		radius = (view.outerRadius / 2 + view.outerRadius) / 2;
		}
		else {
		radius = (view.innerRadius + view.outerRadius) / 2;
		}
		var startAngle = view.startAngle, endAngle = view.endAngle;
		var totalAngle = endAngle - startAngle;
		startAngle += Math.PI / 2;
		endAngle += Math.PI / 2;
		var mertrics = this.measureLabel(label);
		startAngle += (endAngle - (mertrics.width / radius + startAngle)) / 2;
		return { radius: radius, startAngle: startAngle, endAngle: endAngle, totalAngle: totalAngle, view: view };
		};
		Label.prototype.getBarRenderInfo = function (element, label) {
		var renderInfo = element.tooltipPosition();
		renderInfo.y -= this.measureLabel(label).height / 2 + this.options.textMargin;
		return renderInfo;
		};
		Label.prototype.drawable = function (element, label, renderInfo) {
		if (this.options.overlap) {
		return true;
		}
		else if (this.options.arc) {
		return renderInfo.endAngle - renderInfo.startAngle <= renderInfo.totalAngle;
		}
		else {
		var mertrics = this.measureLabel(label), left = renderInfo.x - mertrics.width / 2, right = renderInfo.x + mertrics.width / 2, top_1 = renderInfo.y - mertrics.height / 2, bottom = renderInfo.y + mertrics.height / 2;
		if (this.options.position === 'outside') {
		return this.outsideInRange(left, right, top_1, bottom);
		}
		else {
		return element.inRange(left, top_1) && element.inRange(left, bottom) &&
		element.inRange(right, top_1) && element.inRange(right, bottom);
		}
		}
		};
		Label.prototype.outsideInRange = function (left, right, top, bottom) {
		var labelBounds = this.labelBounds;
		for (var i = 0; i < labelBounds.length; ++i) {
		var bound = labelBounds[i];
		var potins = [
		[left, top],
		[left, bottom],
		[right, top],
		[right, bottom]
		];
		for (var j = 0; j < potins.length; ++j) {
		var x = potins[j][0];
		var y = potins[j][1];
		if (x >= bound.left && x <= bound.right && y >= bound.top && y <= bound.bottom) {
		return false;
		}
		}
		potins = [
		[bound.left, bound.top],
		[bound.left, bound.bottom],
		[bound.right, bound.top],
		[bound.right, bound.bottom]
		];
		for (var j = 0; j < potins.length; ++j) {
		var x = potins[j][0];
		var y = potins[j][1];
		if (x >= left && x <= right && y >= top && y <= bottom) {
		return false;
		}
		}
		}
		labelBounds.push({ left: left, right: right, top: top, bottom: bottom });
		return true;
		};
		Label.prototype.measureLabel = function (label) {
		if (typeof label === 'object') {
		return { width: label.width, height: label.height };
		}
		else {
		var width = 0;
		var lines = label.split('\n');
		for (var i = 0; i < lines.length; ++i) {
		var result = this.ctx.measureText(lines[i]);
		if (result.width > width) {
		width = result.width;
		}
		}
		var height = this.options.fontSize * lines.length;
		return { width: width, height: height };
		}
		};
		Label.prototype.loadImage = function (obj) {
		var image = new Image();
		image.src = obj.src;
		image.width = obj.width;
		image.height = obj.height;
		return image;
		};
		function isPluginsLabelsDefined(options) {
		var chartConfig = options._context.chart.config._config;
		if (chartConfig.options && chartConfig.options.plugins)
		return !!chartConfig.options.plugins.labels;
		return false;
		}
		Chart.register({
		id: 'labels',
		beforeDatasetsUpdate: function (chart, args, options) {
		if (!SUPPORTED_TYPES[chart.config.type] \|\| !isPluginsLabelsDefined(options)) {
		return;
		}
		if (!options.length) {
		options = [options];
		}
		var count = options.length;
		if (!chart._labels \|\| count !== chart._labels.length) {
		chart._labels = options.map(function () {
		return new Label();
		});
		}
		var someOutside = false, maxPadding = 0;
		for (var i = 0; i < count; ++i) {
		var label = chart._labels[i];
		label.setup(chart, options[i]);
		if (label.options.position === 'outside') {
		someOutside = true;
		var padding = label.options.fontSize * 1.5 + label.options.outsidePadding;
		if (padding > maxPadding) {
		maxPadding = padding;
		}
		}
		}
		if (someOutside) {
		chart.chartArea.top += maxPadding;
		chart.chartArea.bottom -= maxPadding;
		}
		},
		afterDatasetUpdate: function (chart, args, options) {
		var _a;
		if (!SUPPORTED_TYPES[chart.config.type] \|\| !isPluginsLabelsDefined(options)) {
		return;
		}
		(_a = chart._labels) === null \|\| _a === void 0 ? void 0 : _a.forEach(function (label) {
		label.args[args.index] = args;
		});
		},
		beforeDraw: function (chart, args, options) {
		var _a;
		if (!SUPPORTED_TYPES[chart.config.type] \|\| !isPluginsLabelsDefined(options)) {
		return;
		}
		(_a = chart._labels) === null \|\| _a === void 0 ? void 0 : _a.forEach(function (label) {
		label.barTotalPercentage = {};
		});
		},
		afterDatasetsDraw: function (chart, args, options) {
		var _a;
		if (!SUPPORTED_TYPES[chart.config.type] \|\| !isPluginsLabelsDefined(options)) {
		return;
		}
		(_a = chart._labels) === null \|\| _a === void 0 ? void 0 : _a.forEach(function (label) {
		label.render();
		});
		}
		});
		})();
		//# sourceMappingURL=chartjs-plugin-labels.js.map

+1

dist/esm/src/chartjs-plugin-labels.js.map

+1

dist/types/index.d.ts

export * from "./src/chart-label";

+35

dist/types/src/chart-label.d.ts

		import Chart, { ChartComponentLike } from 'chart.js/auto';
		export declare const PLUGIN_ID = "labels";
		export declare const getChartLabelPlugin: () => ChartComponentLike;
		export declare class ChartLabel {
		chart: Chart;
		ctx: any;
		args: any;
		percentage: any;
		totalPercentage: any;
		barTotalPercentage: any;
		total: any;
		barTotal: any;
		options: any;
		labelBounds: any;
		setup(chart: Chart, options: any): void;
		private render;
		private renderToDataset;
		private renderToElement;
		private renderLabel;
		private renderBaseLabel;
		private renderArcLabel;
		private shouldRenderToElement;
		private getLabel;
		private getFontColor;
		private getPercentage;
		private getRenderInfo;
		private getBaseRenderInfo;
		private getArcRenderInfo;
		private getBarRenderInfo;
		private outsideInRange;
		private drawable;
		private measureLabel;
		private loadImage;
		private isChartType;
		}

dist/types/src/chartjs-plugin-labels.d.ts

+1

index.js

export * from './src/chart-label';

+605

src/chart-label.ts

		import { fontString } from 'chart.js/helpers';
		import Chart, {
		ChartComponentLike,
		ChartConfiguration,
		ChartType,
		} from 'chart.js/auto';

		/**
		* The label seems to be a string most of the time.
		* However, sometimes we have an extra check for width and height.
		* TODO: Investigate the `label: string \| LabelMetrics`
		* remove LabelMetrics if not needed.
		* */

		interface LabelMetrics {
		width: number;
		height: number;
		}

		interface RenderInfo {
		x: number;
		y: number;
		}

		enum LabelPosition {
		OUTSIDE = 'outside',
		BORDER = 'border',
		DEFAULT = 'default',
		}

		type BooleanMap = { [id: string]: boolean };
		type ChartWithCircumference = 'pie' \| 'doughnut';

		const EMPTY_LINE_SEPARATOR = '\n';
		const SUPPORTED_TYPES: ChartType[] = ['pie', 'doughnut', 'polarArea', 'bar'];
		const SUPPORTED_TYPES_MAP: BooleanMap = SUPPORTED_TYPES.reduce(
		(acc: BooleanMap, id: ChartType) => {
		acc[id] = true;
		return acc;
		},
		{},
		);

		const isAllowedType = (type: string): boolean => SUPPORTED_TYPES_MAP[type];

		const isPluginsLabelsDefined = (options: any): boolean => {
		const chartConfig: any = options?._context?.chart?.config?._config;
		return !!chartConfig?.options?.plugins?.labels;
		};

		export const PLUGIN_ID = 'labels';
		export const getChartLabelPlugin = (): ChartComponentLike => ({
		id: PLUGIN_ID,
		beforeDatasetsUpdate: function (chart: any, args: any, options: any): void {
		if (!isAllowedType(chart.config.type) \|\| !isPluginsLabelsDefined(options)) {
		return;
		}
		if (!options.length) {
		options = [options];
		}
		const count = options.length;
		if (!chart._labels \|\| count !== chart._labels.length) {
		chart._labels = options.map(function () {
		return new ChartLabel();
		});
		}
		let someOutside = false;
		let maxPadding = 0;
		for (let i = 0; i < count; ++i) {
		const label: ChartLabel = chart._labels[i];
		label.setup(chart, options[i]);

		if (label.options.position === LabelPosition.OUTSIDE) {
		someOutside = true;
		const padding =
		label.options.fontSize * 1.5 + label.options.outsidePadding;
		if (padding > maxPadding) {
		maxPadding = padding;
		}
		}
		}
		if (someOutside) {
		chart.chartArea.top += maxPadding;
		chart.chartArea.bottom -= maxPadding;
		}
		},
		afterDatasetUpdate: function (chart: any, args: any, options: any): void {
		if (!isAllowedType(chart.config.type) \|\| !isPluginsLabelsDefined(options)) {
		return;
		}
		chart._labels?.forEach(function (label: any): void {
		label.args[args.index] = args;
		});
		},
		beforeDraw: function (chart: any, args: any, options: any): void {
		if (!isAllowedType(chart.config.type) \|\| !isPluginsLabelsDefined(options)) {
		return;
		}
		chart._labels?.forEach(function (label: any): void {
		label.barTotalPercentage = {};
		});
		},
		afterDatasetsDraw: function (chart: any, args: any, options: any): void {
		if (!isAllowedType(chart.config.type) \|\| !isPluginsLabelsDefined(options)) {
		return;
		}
		chart._labels?.forEach(function (label: any): void {
		label.render();
		});
		},
		});

		export class ChartLabel {
		chart: Chart;
		ctx: any;
		args: any;
		percentage: any;
		totalPercentage: any;
		barTotalPercentage: any;
		total: any;
		barTotal: any;
		options: any;
		labelBounds: any;

		public setup(chart: Chart, options: any): void {
		this.chart = chart;
		this.ctx = chart.ctx;
		this.args = {};
		this.barTotal = {};
		const chartOptions = chart.config.options;

		this.options = Object.assign(
		{
		position: LabelPosition.DEFAULT,
		precision: 0,
		fontSize: chartOptions.font ? chartOptions.font.size : 12,
		fontColor: chartOptions.color \|\| '#333333',
		fontStyle: chartOptions.font ? chartOptions.font.style : 'normal',
		fontFamily: chartOptions.font
		? chartOptions.font.family
		: '\'Helvetica Neue\', \'Helvetica\', \'Arial\', sans-serif',
		shadowOffsetX: 3,
		shadowOffsetY: 3,
		shadowColor: 'rgba(0,0,0,0.3)',
		shadowBlur: 6,
		images: [],
		outsidePadding: 2,
		textMargin: 2,
		overlap: true,
		},
		options,
		);
		const config: ChartConfiguration = chart?.config as ChartConfiguration;
		if (config.type === 'bar') {
		this.options.position = LabelPosition.DEFAULT;
		this.options.arc = false;
		this.options.overlap = true;
		}
		}

		private render(): void {
		this.labelBounds = [];
		this.chart.data.datasets.forEach((d: any, i: number) =>
		this.renderToDataset.bind(this)(d, i),
		);
		}

		private renderToDataset(dataset: any, index: number): void {
		this.totalPercentage = 0;
		this.total = null;
		const arg = this.args[index];
		arg.meta.data.forEach((element: any, index: number) =>
		this.renderToElement.bind(this)(dataset, arg, element, index),
		);
		}

		private renderToElement(
		dataset: any,
		arg: any,
		element: any,
		index: number,
		): void {
		if (!this.shouldRenderToElement(arg.meta, element)) {
		return;
		}
		this.percentage = null;
		const label = this.getLabel(dataset, element, index);
		if (!label) {
		return;
		}
		const ctx = this.ctx;
		ctx.save();

		const font: string = fontString(
		this.options.fontSize,
		this.options.fontStyle,
		this.options.fontFamily,
		);
		if (font) {
		ctx.font = font;
		}

		const renderInfo = this.getRenderInfo(element, label);
		if (!this.drawable(element, label, renderInfo)) {
		ctx.restore();
		return;
		}
		ctx.beginPath();
		ctx.fillStyle = this.getFontColor(dataset, element, index);
		this.renderLabel(label, renderInfo);
		ctx.restore();
		}

		private renderLabel(label: string \| LabelMetrics, renderInfo: any): void {
		return this.options.arc
		? this.renderArcLabel(label, renderInfo)
		: this.renderBaseLabel(label, renderInfo);
		}

		private renderBaseLabel(label: string \| LabelMetrics, position: any): void {
		const ctx = this.ctx;
		if (typeof label === 'object') {
		ctx.drawImage(
		label,
		position.x - label.width / 2,
		position.y - label.height / 2,
		label.width,
		label.height,
		);
		return;
		}

		ctx.save();
		ctx.textBaseline = 'top';
		ctx.textAlign = 'center';

		if (this.options.textShadow) {
		ctx.shadowOffsetX = this.options.shadowOffsetX;
		ctx.shadowOffsetY = this.options.shadowOffsetY;
		ctx.shadowColor = this.options.shadowColor;
		ctx.shadowBlur = this.options.shadowBlur;
		}

		const lines = label.split(EMPTY_LINE_SEPARATOR);
		for (let i = 0; i < lines.length; i++) {
		const y: number =
		position.y -
		(this.options.fontSize / 2) * lines.length +
		this.options.fontSize * i;
		ctx.fillText(lines[i], position.x, y);
		}
		ctx.restore();
		}

		private renderArcLabel(label: string \| LabelMetrics, renderInfo: any): void {
		const ctx = this.ctx;
		const radius = renderInfo.radius;
		const view = renderInfo.view;

		ctx.save();
		ctx.translate(view.x, view.y);

		if (typeof label === 'string') {
		ctx.rotate(renderInfo.startAngle);
		ctx.textBaseline = 'middle';
		ctx.textAlign = 'left';

		let max = 0;
		const lines: string[] = label.split(EMPTY_LINE_SEPARATOR);
		const widths: number[] = [];
		const offset: number =
		this.options.position === LabelPosition.BORDER
		? ((lines.length - 1) * this.options.fontSize) / 2
		: 0;

		for (let j = 0; j < lines.length; ++j) {
		const metrics: TextMetrics = this.ctx.measureText(lines[j]);
		if (metrics.width > max) {
		max = metrics.width;
		}
		widths.push(metrics.width);
		}

		for (let j = 0; j < lines.length; ++j) {
		const line = lines[j];
		const y = (lines.length - 1 - j) * -this.options.fontSize + offset;
		ctx.save();
		const padding = (max - widths[j]) / 2;
		ctx.rotate(padding / radius);
		for (let i = 0; i < line.length; i++) {
		const char = line.charAt(i);
		const metrics: TextMetrics = this.ctx.measureText(char);
		ctx.save();
		ctx.translate(0, -1 * radius);
		ctx.fillText(char, 0, y);
		ctx.restore();
		ctx.rotate(metrics.width / radius);
		}
		ctx.restore();
		}
		} else {
		ctx.rotate((view.startAngle + Math.PI / 2 + renderInfo.endAngle) / 2);
		ctx.translate(0, -1 * radius);
		this.renderLabel(label, { x: 0, y: 0 });
		}
		ctx.restore();
		}

		private shouldRenderToElement(meta: any, element: any): boolean {
		return (
		!meta.hidden &&
		(this.options.showZero \|\| this.isChartType(this.chart, 'polarArea')
		? element.outerRadius !== 0
		: element.circumference !== 0)
		);
		}

		/**
		* TODO: Investigate what the label type might be.
		* It might not be LabelMetrics, but often times it is a string.
		* */
		private getLabel(
		dataset: any,
		element: any,
		index: any,
		): string \| LabelMetrics {
		let label;
		if (typeof this.options.render === 'function') {
		label = this.options.render({
		label: this.chart.config.data.labels[index],
		value: dataset.data[index],
		percentage: this.getPercentage(dataset, element, index),
		dataset,
		index,
		});
		} else {
		switch (this.options.render) {
		case 'value':
		label = dataset.data[index];
		break;
		case 'label':
		label = this.chart.config.data.labels[index];
		break;
		case 'image':
		label = this.options.images[index]
		? this.loadImage(this.options.images[index])
		: '';
		break;
		case 'percentage':
		default:
		label = this.getPercentage(dataset, element, index) + '%';
		break;
		}
		}
		if (typeof label === 'object') {
		label = this.loadImage(label);
		} else if (label) {
		label = label.toString();
		}
		return label;
		}

		private getFontColor(dataset: any, element: any, index: number): any {
		let fontColor = this.options.fontColor;
		if (typeof fontColor === 'function') {
		fontColor = fontColor({
		label: this.chart.config.data.labels[index],
		value: dataset.data[index],
		percentage: this.getPercentage(dataset, element, index),
		backgroundColor: dataset.backgroundColor[index],
		dataset,
		index,
		});
		} else if (typeof fontColor !== 'string') {
		fontColor = fontColor[index] \|\| this.chart.config.options.color;
		}
		return fontColor;
		}

		private getPercentage(dataset: any, element: any, index: number): number {
		if (this.percentage) {
		return this.percentage;
		}
		let percentage: number;
		if (
		this.isChartType(this.chart, 'polarArea') \|\|
		this.isChartType(this.chart, 'doughnut') \|\|
		this.isChartType(this.chart, 'pie')
		) {
		if (!this.total) {
		this.total = 0;
		for (let i = 0; i < dataset.data.length; ++i) {
		this.total += dataset.data[i];
		}
		}
		percentage = (dataset.data[index] / this.total) * 100;
		} else if (this.isChartType(this.chart, 'bar')) {
		if (!this.barTotal[index]) {
		this.barTotal[index] = 0;
		for (let i = 0; i < this.chart.data.datasets.length; ++i) {
		this.barTotal[index] += this.chart.data.datasets[i].data[index];
		}
		}
		percentage = (dataset.data[index] / this.barTotal[index]) * 100;
		} else {
		const circumference: number = (
		this.chart.config as ChartConfiguration<ChartWithCircumference>
		).options.circumference;
		percentage = (element.circumference / circumference) * 100;
		}
		percentage = parseFloat(percentage.toFixed(this.options.precision));
		if (!this.options.showActualPercentages) {
		if (this.isChartType(this.chart, 'bar')) {
		this.totalPercentage = this.barTotalPercentage[index] \|\| 0;
		}
		this.totalPercentage += percentage;
		if (this.totalPercentage > 100) {
		percentage -= this.totalPercentage - 100;
		percentage = parseFloat(percentage.toFixed(this.options.precision));
		}
		if (this.isChartType(this.chart, 'bar')) {
		this.barTotalPercentage[index] = this.totalPercentage;
		}
		}
		this.percentage = percentage;
		return percentage;
		}

		private getRenderInfo(element: any, label: any): any {
		if (this.isChartType(this.chart, 'bar')) {
		return this.getBarRenderInfo(element, label);
		} else {
		return this.options.arc
		? this.getArcRenderInfo(element, label)
		: this.getBaseRenderInfo(element, label);
		}
		}

		private getBaseRenderInfo(element: any, label: any): any {
		if (
		this.options.position === LabelPosition.OUTSIDE \|\|
		this.options.position === LabelPosition.BORDER
		) {
		let rangeFromCentre: number;
		const view = element;
		const centreAngle =
		view.startAngle + (view.endAngle - view.startAngle) / 2;
		const innerRadius = view.outerRadius / 2;
		if (this.options.position === LabelPosition.BORDER) {
		rangeFromCentre = (view.outerRadius - innerRadius) / 2 + innerRadius;
		} else if (this.options.position === LabelPosition.OUTSIDE) {
		rangeFromCentre =
		view.outerRadius -
		innerRadius +
		innerRadius +
		this.options.textMargin;
		}
		const renderInfo: RenderInfo = {
		x: view.x + Math.cos(centreAngle) * rangeFromCentre,
		y: view.y + Math.sin(centreAngle) * rangeFromCentre,
		};
		if (this.options.position === LabelPosition.OUTSIDE) {
		const offset: number =
		this.options.textMargin + this.measureLabel(label).width / 2;
		renderInfo.x += renderInfo.x < view.x ? -offset : offset;
		}
		return renderInfo;
		} else {
		return element.tooltipPosition();
		}
		}

		private getArcRenderInfo(element: any, label: any): any {
		let radius;
		const view = element;
		if (this.options.position === LabelPosition.OUTSIDE) {
		radius =
		view.outerRadius + this.options.fontSize + this.options.textMargin;
		} else if (this.options.position === LabelPosition.BORDER) {
		radius = (view.outerRadius / 2 + view.outerRadius) / 2;
		} else {
		radius = (view.innerRadius + view.outerRadius) / 2;
		}
		let startAngle = view.startAngle,
		endAngle = view.endAngle;
		const totalAngle = endAngle - startAngle;
		startAngle += Math.PI / 2;
		endAngle += Math.PI / 2;
		const metrics: LabelMetrics = this.measureLabel(label);
		startAngle += (endAngle - (metrics.width / radius + startAngle)) / 2;
		return { radius, startAngle, endAngle, totalAngle, view };
		}

		private getBarRenderInfo(element: any, label: any): any {
		const renderInfo = element.tooltipPosition();
		renderInfo.y -=
		this.measureLabel(label).height / 2 + this.options.textMargin;
		return renderInfo;
		}

		private outsideInRange(
		left: any,
		right: any,
		top: any,
		bottom: any,
		): boolean {
		const labelBounds = this.labelBounds;
		for (let i = 0; i < labelBounds.length; ++i) {
		const bound = labelBounds[i];
		let potins = [
		[left, top],
		[left, bottom],
		[right, top],
		[right, bottom],
		];
		for (let j = 0; j < potins.length; ++j) {
		const x = potins[j][0];
		const y = potins[j][1];
		if (
		x >= bound.left &&
		x <= bound.right &&
		y >= bound.top &&
		y <= bound.bottom
		) {
		return false;
		}
		}
		potins = [
		[bound.left, bound.top],
		[bound.left, bound.bottom],
		[bound.right, bound.top],
		[bound.right, bound.bottom],
		];
		for (let j = 0; j < potins.length; ++j) {
		const x = potins[j][0];
		const y = potins[j][1];
		if (x >= left && x <= right && y >= top && y <= bottom) {
		return false;
		}
		}
		}
		labelBounds.push({ left, right, top, bottom });
		return true;
		}

		private drawable(
		element: any,
		label: LabelMetrics \| string,
		renderInfo: any,
		): boolean {
		if (this.options.overlap) {
		return true;
		}

		if (this.options.arc) {
		return (
		renderInfo.endAngle - renderInfo.startAngle <= renderInfo.totalAngle
		);
		}

		const metrics: LabelMetrics = this.measureLabel(label);
		const left: number = renderInfo.x - metrics.width / 2;
		const right: number = renderInfo.x + metrics.width / 2;
		const top: number = renderInfo.y - metrics.height / 2;
		const bottom: number = renderInfo.y + metrics.height / 2;

		if (this.options.position === LabelPosition.OUTSIDE) {
		return this.outsideInRange(left, right, top, bottom);
		}

		return (
		element.inRange(left, top) &&
		element.inRange(left, bottom) &&
		element.inRange(right, top) &&
		element.inRange(right, bottom)
		);
		}

		private measureLabel(label: string \| LabelMetrics): LabelMetrics {
		if (typeof label === 'object') {
		return { width: label.width, height: label.height };
		}

		const lines: string[] = label.split(EMPTY_LINE_SEPARATOR);
		const width: number = lines.reduce((acc: number, item: string): number => {
		const result: TextMetrics = this.ctx.measureText(item);
		return result.width > acc ? result.width : acc;
		}, 0);
		const height: number = this.options.fontSize * lines.length;
		return { width, height };
		}

		private loadImage(imgObject: HTMLImageElement): HTMLImageElement {
		const image: HTMLImageElement = new Image();
		image.src = imgObject.src;
		image.width = imgObject.width;
		image.height = imgObject.height;
		return image;
		}

		private isChartType(chart: Chart, type: ChartType): boolean {
		const config: ChartConfiguration = chart?.config as ChartConfiguration;
		return config?.type === type;
		}
		}

+16

tsconfig.json

		{
		"compilerOptions": {
		"module": "ES2022",
		"noImplicitAny": true,
		"removeComments": true,
		"preserveConstEnums": true,
		"sourceMap": true,
		"allowJs": true,
		"outDir": "dist/esm",
		"moduleResolution": "Node",
		"declaration": true,
		"declarationDir": "dist/types"
		},
		"include": ["src/*/", "index.js"],
		"exclude": ["node_modules", "*/.test.js"]
		}

+6

-1

.eslintrc.json

		@@ -6,3 +6,8 @@ {
		},
		"extends": "eslint:recommended",
		"extends": [
		"eslint:recommended", "plugin:@typescript-eslint/recommended"
		],
		"parser": "@typescript-eslint/parser",
		"plugins": ["@typescript-eslint"],
		"root": true,
		"parserOptions": {
		@@ -9,0 +14,0 @@ "ecmaVersion": 12,

+11

-0

CHANGELOG.md

		# Change Log

		## v5.0.0-beta / 2023-07-03
		### Added
		- Angular support with usage example

		### Changed
		- Add support for Chart.js v4.3 !BREAKING
		- TypeScript refactoring of the initial plugin source
		- TypeScript eslint support
		- Extracted `ChartLabel` – this holds a large chunk of the initial logic
		- Extracted `getChartLabelPlugin()` method – which can be used to register chart plugin

		## v3.0.0 / 2021-05-26
		@@ -4,0 +15,0 @@ ### Added

+10

-5

package.json

		{
		"name": "chart.js-plugin-labels-dv",
		"version": "4.0.0",
		"version": "5.0.0-beta",
		"description": "Chart.js plugin to display labels on pie, doughnut and polar area chart.",
		"main": "src/chartjs-plugin-labels.js",
		"main": "dist/esm/chart-label.js",
		"scripts": {
		"build": "rollup -c",
		"build:ts": "tsc",
		"lint": "eslint ./"
		},
		"peerDependencies": {
		"chart.js": "^4.2.1"
		"chart.js": "^4.3.0"
		},
		"types": "./dist/types/index.d.ts",
		"repository": {
		@@ -30,6 +32,9 @@ "type": "git",
		"devDependencies": {
		"eslint": "^8.36.0",
		"@typescript-eslint/eslint-plugin": "^5.60.1",
		"@typescript-eslint/parser": "^5.60.1",
		"eslint": "^8.44.0",
		"rollup": "^2.79.1",
		"rollup-plugin-terser": "^7.0.2"
		"rollup-plugin-terser": "^7.0.2",
		"typescript": "^4.6.4"
		}
		}

+81

-28

README.md

		@@ -1,4 +0,8 @@
		# Chart.js Plugin Labels for Chart.js v3+
		[Chart.js](https://www.chartjs.org/) plugin to display labels on pie, doughnut and polar area chart. Forked from emn178/chartjs-plugin-labels.
		[![Maintainability](https://api.codeclimate.com/v1/badges/ded2c349739e4d87130b/maintainability)](https://codeclimate.com/github/DavideViolante/chart.js-plugin-labels-dv/maintainability) ![npm](https://img.shields.io/npm/dm/chart.js-plugin-labels-dv) [![Donate](https://img.shields.io/badge/paypal-donate-179BD7.svg)](https://www.paypal.me/dviolante)

		[![NPM](https://nodei.co/npm/chart.js-plugin-labels-dv.png)](https://nodei.co/npm/chart.js-plugin-labels-dv/)

		# Chart.js Plugin Labels for Chart.js v4+
		[Chart.js](https://www.chartjs.org/) plugin to display labels on pie, doughnut and polar area chart. Forked from [emn178/chartjs-plugin-labels](https://github.com/emn178/chartjs-plugin-labels).

		## Demo
		@@ -16,3 +20,3 @@ - [Demo](http://emn178.github.io/chartjs-plugin-labels/samples/demo/) from the original repo using Chart.js v2.x, but it's almost the same.

		## Installation
		## Install from NPM
		- `npm i chart.js-plugin-labels-dv`
		@@ -22,3 +26,3 @@
		JavaScript
		```JavaScript
		```js
		new Chart(ctx, {
		@@ -32,40 +36,27 @@ type: type,
		render: 'value',

		// precision for percentage, default is 0
		precision: 0,

		// identifies whether or not labels of value 0 are displayed, default is false
		showZero: true,

		// font size, default is defaultFontSize
		fontSize: 12,

		// font color, can be color array for each data or function for dynamic color, default is defaultFontColor
		fontColor: '#fff',

		// font style, default is defaultFontStyle
		fontStyle: 'normal',

		// font family, default is defaultFontFamily
		fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

		// draw text shadows under labels, default is false
		textShadow: true,

		// text shadow intensity, default is 6
		shadowBlur: 10,

		// text shadow X offset, default is 3
		shadowOffsetX: -5,

		// text shadow Y offset, default is 3
		shadowOffsetY: 5,

		// text shadow color, default is 'rgba(0,0,0,0.3)'
		shadowColor: 'rgba(255,0,0,0.75)',

		// draw label in arc, default is false
		// bar chart ignores this
		arc: true,

		// position to draw label, available value is 'default', 'border' and 'outside'
		@@ -75,10 +66,7 @@ // bar chart ignores this
		position: 'default',

		// draw label even it's overlap, default is true
		// bar chart ignores this
		overlap: true,

		// show the real calculated percentages from the values and don't apply the additional logic to fit the percentages to 100 in total, default is false
		showActualPercentages: true,

		// set images when `render` is 'image'
		@@ -92,7 +80,5 @@ images: [
		],

		// add padding when position is `outside`
		// default is 2
		outsidePadding: 4,

		// add margin of text when position is `outside` or `border`
		@@ -112,3 +98,2 @@ // default is 2
		return '$' + args.value;

		// return object if it is image
		@@ -131,3 +116,3 @@ // return { src: 'image.png', width: 16, height: 16 };

		```JavaScript
		```js
		labels: [
		@@ -146,3 +131,3 @@ {

		```JavaScript
		```js
		Chart.defaults.plugins.labels = {
		@@ -170,6 +155,74 @@ // ...

		### Angular / Vue
		We need your contribution! If you know how to make it work with these frameworks please open a PR editing this readme.
		### Vue
		From https://github.com/DavideViolante/chartjs-plugin-labels/issues/2#issuecomment-1483948596
		```ts
		import Chart from "chart.js/auto";
		import * as helpers from "chart.js/helpers";
		```
		Then inside the `created()` hook:
		```ts
		async created() {
		window.Chart = Chart;
		Chart.helpers = helpers;
		awaitimport("chart.js-plugin-labels-dv");
		}
		```

		### Angular
		You would need to create your own chart component.
		```html
		<div class="chart">
		<canvas [id]="name"></canvas>
		</div>
		```

		Importing should be straightforward
		```ts
		import Chart from 'chart.js/auto';
		import { getChartLabelPlugin, PLUGIN_ID } from 'chart.js-plugin-labels-dv';
		```

		```ts
		@Input() chartConfig: any;
		@Output() chartCreated: EventEmitter<Chart> = new EventEmitter<Chart>();

		public readonly name: string = `chart-${ChartComponent.instanceCount++}`;
		private chart: Chart;

		ngAfterViewInit(): void {
		this.createChart();
		}

		private createChart(): void {
		if (!this.hasRegisteredPlugin()) {
		Chart.register(getChartLabelPlugin());
		}

		this.chart = new Chart(this.name, this.chartConfig);
		this.chartCreated.emit(this.chart);
		}

		private hasRegisteredPlugin(): boolean {
		return !!Chart.registry?.plugins.get(PLUGIN_ID);
		}
		```

		For fixing the module failed compilation error I have updated tsconfig as follows:

		```
		Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
		Error: /node_modules/chart.js-plugin-labels-dv/src/chart-label.ts is missing from the TypeScript compilation.
		Please make sure it is in your tsconfig via the 'files' or 'include' property.
		```

		tsconfig.json
		```json
		"files": [
		...
		"node_modules/chart.js-plugin-labels-ed/src/chart-label.ts"
		],
		```

		Test it out with data from the official Chart.js website: https://www.chartjs.org/docs/latest/charts/doughnut.html#pie

		## License
		@@ -180,2 +233,2 @@ [MIT license](http://www.opensource.org/licenses/MIT).
		The project's website is located at https://github.com/emn178/chartjs-plugin-labels
		Authors: Chen, Yi-Cyuan (emn178@gmail.com), Davide Violante
		Authors: Chen, Yi-Cyuan (emn178@gmail.com), Davide Violante, eduard-landclan

chart.js-plugin-labels-dv - npm Package Compare versions

New alerts

Improved metrics

Worsened metrics