Overlapping of point labels in multi line chart about chartist-plugin-pointlabels

[GennadyK]

Plugin is using SVG text element ( http://tutorials.jenkov.com/svg/text-element.html ), so it looks like no much could be done in terms of changing position for point labels with CSS.
Only something like this, once you added additional class in chartist-plugin-pointlabels.js (labelClass: 'ct-label ct-pointlabel',) :

.ct-pointlabel {
stroke: red;
font-size: 1.3rem;
}

Here is one way to do it, although it's a "manual" one:
Inside chartist-plugin-pointlabels.js add check for data.meta:

    if (data.meta !== undefined) { // check if meta defined for the point
		data.group.elem('text', {
		  x: position.x + options.labelOffset.x,
		  y: position.y + options.labelOffset.y + data.meta, // use meta's value to move text vertically
		  style: 'text-anchor: ' + options.textAnchor
		}, options.labelClass).text(options.labelInterpolationFnc(value));
	}

In your HTML file add meta to your data - just replace values with pairs {value: 0.12, meta: 30} :
series: [
[0.13, 0.01, 0.25, 0.01, 0.18, {value: 0.12, meta: 30}], - this will display point label for the last point only, so you may also prune some of the labels with this method.

2020-10-30 UPDATE:
Color it in the same color as the line, e.g.:

/* Set colours for lines. Lines are listed from the bottom to the top */
.ct-series-a .ct-line, .ct-series-a .ct-point, .ct-series-a .ct-pointlabel { /* Line 1 */
stroke: #70AD47;
}

If you replace meta: 30 above with meta: '+12.1 +30.0', you can now shift it by deltaX and deltaY values, using the code below. Also just an idea: you may get pixel value of the width of the chart and create a multiplier k (... + k*deltaY,) out of it and use it to move numbers closer/farther to each other with the change of the screen/chart width:

    //var chartWidth = document.getElementById('chart1').offsetWidth;

    if (data.meta !== undefined) {
		// '+12.1 +06.8' - 1st number is deltaX, 2nd is deltaY
		var deltaX = parseFloat(data.meta.substr(0, data.meta.indexOf(' ')));
		var deltaY = parseFloat(data.meta.substr(data.meta.indexOf(' ')+1));
		data.group.elem('text', {
		  x: position.x + options.labelOffset.x + deltaX,
		  y: position.y + options.labelOffset.y + deltaY,
		  style: 'text-anchor: ' + options.textAnchor
		}, options.labelClass).text(options.labelInterpolationFnc(value));
	}

[anirudhmurali]

Thanks!