Ngx-charts: Display all points (circles) by default

[metodribic]

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
  

[marjan-georgiev]

This will not be possible any more. Having a circle at each point proved to be very performance heavy, and it was removed as a feature in 6.0.0. Starting from 6.0.0, there will be one circle per series visible at most.

[walfen]

How is it possible to display one circle per series? Related to: #462 - Display single point in line chart

[marjan-georgiev]

The circles are only activated on mouseover.

[metodribic]

Ok I see why this is an issue, but I can not imagine having charts without points. Imagine two edge cases: if you have very little points (2-5) or large number of them (50+), how could user potentially guess where the points are if there is going to be one at max? The only way it would be by following the path and checking all the points on its way?

Is there any related discussion about that so I won't reinvent the wheel here?

[chenyoufei]

To keep the highlighted dots highlighted all the time all you need to do is in activate and deactivated listeners, keep the activeEntries array fresh, since each time the mouse event is triggered, activeEntries is cleared.

For example

1. make two identical copies of highlighted dots -- this.highlights and this.highlights_copy;

2. in template
   ...............................
   [activeEntries] = "highlights"
   (deactivate) = "onActivateAndDeactivate()"
   (active) = "onActivateAndDeactivate()"
   

3. and in .ts, have this
   onActivateAndDeactivate() { // keep the highlights on all the time
   this.highlights = [...this.highlights_copy];
   }

[metodribic]

@chenyoufei thank you for your exhaustive answer. I though about that too, but I'm not sure how this will affect performance with charts which has a lot of points. Did you tried it maybe?

[chenyoufei]

@metodribic yes I was concerned about performance too but it turned out to be fine. The example code above is already in production. I normally have 10 or so series on the chart with each having 11 dots exactly , and so far so good.

[chenyoufei]

Well the solution no longer works after upgrading to 6.0.0, since active entries do not show dots any more.

[calebeaires]

@chenyoufei - same here. this is bad!

[devakone]

Any other way to make this happen?

[burzum619]

Any updates on this?

[m-radzikowski]

Hi, I have the same problem. My charts sometimes have single, unrelated points, which are not visible at all unless user moved cursor on them.
Option to show all or selected points would be very helpful.

[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.

[Moulde]

I agree, the performance argument is certainly valid, but it's also very valid to have series with few points, where the performance hit of showing all dots must be minimal.

[joshigauravv]

To keep the highlighted dots highlighted all the time all you need to do is in activate and deactivated listeners, keep the activeEntries array fresh, since each time the mouse event is triggered, activeEntries is cleared.

For example

1. make two identical copies of highlighted dots -- this.highlights and this.highlights_copy;

2. in template
   ...............................
   [activeEntries] = "highlights"
   (deactivate) = "onActivateAndDeactivate()"
   (active) = "onActivateAndDeactivate()"

3. and in .ts, have this
   onActivateAndDeactivate() { // keep the highlights on all the time
   this.highlights = [...this.highlights_copy];
   }

I still can't see single points even after setting the activeEntries. Anything I might be missing.

The format is [{name: seriesName}, ..]
Is this correct?

[TBrient]

Any luck on this in the latest version?

[chriszrc]

Seems like the circles are part of the tooltip hover component, rather than the activeEntries state of the chart, so you'd need to trigger the tooltips everywhere. Seems messy.

Has anyone tried to create a combo chart with lines and bubbles? I think that would create the same effect. I got the basic combo-chart demo working, but I haven't managed to switch out the bars for bubbles :'(

[christianMisch]

i found a way to address the invisible circle issue. I'm using ngx-charts 6.1.0 with Angular 4.4.7.

I created a custom component custom-circle-series.component.ts and added a *ngFor in the template to render all circles.
In the component class i removed the activeCircle field and initialized the circles in ngOnInit

I also modified the activateCircle and deactivateCircle to control the visible bar of the currently activated circle. The barVisible field belongs now to the circle class and shows only the vertical bar if there is a data point in the line chart. I also added an id field to the circle class which are generated in the getCircles method.
Changes of both components can be seen in the attachement. The tooltip templates also need to include null checks otherwise errors will be shown.

I use Razzeee's changes for not displaying null values.

https://github.com/Razzeee/ngx-charts/commit/385bda45b43a1a777e5aa827237dad37998a8b3d

modified_comp_line_chart.zip

[jgrandon]

i found a way to address the invisible circle issue. I'm using ngx-charts 6.1.0 with Angular 4.4.7.

I created a custom component custom-circle-series.component.ts and added a *ngFor in the template to render all circles.
In the component class i removed the activeCircle field and initialized the circles in ngOnInit

I also modified the activateCircle and deactivateCircle to control the visible bar of the currently activated circle. The barVisible field belongs now to the circle class and shows only the vertical bar if there is a data point in the line chart. I also added an id field to the circle class which are generated in the getCircles method.
Changes of both components can be seen in the attachement. The tooltip templates also need to include null checks otherwise errors will be shown.

I use Razzeee's changes for not displaying null values.

Razzeee@385bda4

modified_comp_line_chart.zip

in your custom-circle-series.component.ts you're importing stuff from some unknown paths. Can you provide these files, explain what are them or how to build them? I would really apreciate your help so i dont have to build my own custom line chart.

[Brachacz]

i found a way to address the invisible circle issue. I'm using ngx-charts 6.1.0 with Angular 4.4.7.

I created a custom component custom-circle-series.component.ts and added a *ngFor in the template to render all circles.
In the component class i removed the activeCircle field and initialized the circles in ngOnInit

I also modified the activateCircle and deactivateCircle to control the visible bar of the currently activated circle. The barVisible field belongs now to the circle class and shows only the vertical bar if there is a data point in the line chart. I also added an id field to the circle class which are generated in the getCircles method.
Changes of both components can be seen in the attachement. The tooltip templates also need to include null checks otherwise errors will be shown.

I use Razzeee's changes for not displaying null values.

Razzeee@385bda4

modified_comp_line_chart.zip

Can you post the source for Circle model?

[HDaghash]

Can we make this optional instead of removing it ?

[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

[christianMisch]

So guys,

I'm a bit late @jgrandon @WojciechSlyp but here are the classes you need:

circle.model.ts

export class Circle {
    id: number;
    barVisible: boolean;
    cx;
    cy;
    r;
    fill;
    stroke;
    data;
    classNames;
    circleOpacity;
    pointerEvents;
    value;
    label;
    radius;
    height;
    tooltipLabel;
    color;
    opacity;
    seriesName;
    gradientStops;
    min;
    max;

    constructor(
        id,
        classNames,
        value,
        label,
        data,
        cx,
        cy,
        radius,
        height,
        tooltipLabel,
        color,
        opacity,
        seriesName,
        gradientStops,
        min,
        max,
        barVisible
    ) {
        this.id = id;
        this.classNames = classNames;
        this.value = value;
        this.label = label;
        this.data = data;
        this.cx = cx;
        this.cy = cy;
        this.radius = radius;
        this.height = height;
        this.tooltipLabel = tooltipLabel;
        this.color = color;
        this.opacity = opacity;
        this.seriesName = seriesName;
        this.gradientStops = gradientStops;
        this.min = min;
        this.max = max;
    }
}

id.ts

````
const cache = {};

/**

• Generates a short id.
  *
• Description:
• A 4-character alphanumeric sequence (364 = 1.6 million)
• This should only be used for JavaScript specific models.
• http://stackoverflow.com/questions/6248666/how-to-generate-short-uid-like-ax4j9z-in-js
  *
• Example: ebgf
  */
  export function id(): string {
  let newId = ('0000' + (Math.random() * Math.pow(36, 4) << 0).toString(36)).slice(-4);

// append a 'a' because neo gets mad
newId = a${newId};

// ensure not already used
if(!cache[newId]) {
cache[newId] = true;
return newId;
}

return id();
}

````

label.helper.ts

/**
 * Formats a label given a date, number or string.
 * 
 * @export
 * @param {*} label
 * @returns {string}
 */
export function formatLabel(label: any): string {
    if (label instanceof Date) {
      label = label.toLocaleDateString();
    } else {
      label = label.toLocaleString();
    }

    return label;
  }

I think these classes hasn't been modified at all..

[mohamedaboelmagd]

const m = svg[0].getElementsByTagName('marker')[index];
const c = svg[0].getElementsByTagName('circle')[index];

for multi data

[zaniniflz]

@HDaghash , many thanks. your solution is working for me.
but, there is a way to show the value next each dot.

[ajite]

@zaniniflz

I tried adding an SVG text element in the createMarker method. I made the dot bigger and centered the text in it.

  var text = document.createElementNS(
    'http://www.w3.org/2000/svg',
    'text'
  );
  marker.append(text);
  const textAttributes = { } // check what you need (https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text)
  this.setAttributes(t, textAttributes);

The thing is that the code does not loop for each node but for each path. At the beginning I was unable to display different texts for different nodes. Since my chart does not need to display the legend, I went for something dirty but easy... I added one path per node and skipped the first path in the showDots method for(let path of paths) . If you have a path with 5 nodes, you will need 6 paths in your charts. 1 path to create the main line and one path per the dot. This method also gave me the ability to customise the dot colour.

Results: