Display all points (circles) by default

I’m submitting a … (check one with “x”)

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here

Expected behavior

It seems that in you can not display all the points by default in line and area chart other than putting all the data in the activeEntries, but once you hover the chart you lose all of the points again. Maybe I’m missing something but I can not find it in the documentation or elsewhere.

What is the motivation / use case for changing the behavior?

Sometime it is useful to have all the points (circles) displayed all the time because it is hard to determine where are the points in some cases.

• ngx-charts version: 5.3.1

• Angular version: 4.2.2

[UmutAkkaya]

I don’t understand why this issue is closed. I understand it might cause performance issues but it should be customizable and off by default.

[HDaghash]

if anyone still needs this feature I workaround this feature with a non-super clean solution but it works with no side effect so far :

custom service to draw the points over liner chart:

import { Injectable } from '@angular/core';
@Injectable()
export class CustomLinerChartService {
	/**
	 * custom: override SVG to have the dots display all the time over the liner chart
	 * since it's not supported anymore from ngx chart
	 */

	showDots(chart) {
		let index = 0;
		const paths = chart.chartElement.nativeElement.getElementsByClassName(
			'line-series'
		);
		const color = chart.chartElement.nativeElement.getElementsByClassName(
			'line-highlight'
		);

		for (let path of paths) {
			const chrtColor = color[index].getAttribute('ng-reflect-fill');
			const pathElement = path.getElementsByTagName('path')[0];
			const pathAttributes = {
				'marker-start': `url(#dot${index})`,
				'marker-mid': `url(#dot${index})`,
				'marker-end': `url(#dot${index})`
			};
			this.createMarker(chart, chrtColor, index);
			this.setAttributes(pathElement, pathAttributes);
			index += 1;
		}
	}

	/**
	 * create marker
	 *
	 */

	createMarker(chart, color, index) {
		const svg = chart.chartElement.nativeElement.getElementsByTagName('svg');
		var marker = document.createElementNS(
			'http://www.w3.org/2000/svg',
			'marker'
		);
		var circle = document.createElementNS(
			'http://www.w3.org/2000/svg',
			'circle'
		);
		svg[0].getElementsByTagName('defs')[0].append(marker);
		marker.append(circle);
		const m = svg[0].getElementsByTagName('marker')[0];
		const c = svg[0].getElementsByTagName('circle')[0];

		const markerAttributes = {
			id: `dot${index}`,
			viewBox: '0 0 10 10',
			refX: 5,
			refY: 5,
			markerWidth: 5,
			markerHeight: 5
		};

		const circleAttributes = {
			cx: 5,
			cy: 5,
			r: 5,
			fill: color
		};
		m.append(circle);

		this.setAttributes(m, markerAttributes);
		this.setAttributes(c, circleAttributes);
	}

	/**
	 * set multiple attributes
	 */
	setAttributes(element, attributes) {
		for (const key in attributes) {
			element.setAttribute(key, attributes[key]);
		}
	}
}

and after your view init and the data is set to the chart call :

	@ViewChild('chart') chart: any;

	ngAfterViewInit() {
		this.customLinerChartService.showDots(this.chart);
	}

make sure to have the reference on your chart : <ngx-charts-line-chart #chart>

UPDATE :

by mistake, I’m using ng-reflect-fill CSS class which will not be available on production mode so currently, I’m setting the color by index