How to highlight Data Points Always in a Line Chart with NGRX?

Question

I have a line chart that displays line series.

How is it possible to highlight the data points always?

Currently only when mouse over it highlights one data point.

<ngx-charts-line-chart
  class="chart-container"
  [scheme]="colorScheme"
  [schemeType]="schemeType"
  [results]="results"
  [animations]="animations"
  [legend]="true"
  [legendTitle]="legendTitle"
  [legendPosition]="legendPosition"
  [gradient]="gradient"
  [xAxis]="showXAxis"
  [yAxis]="showYAxis"
  [showXAxisLabel]="showXAxisLabel"
  [showYAxisLabel]="showYAxisLabel"
  [xAxisLabel]="xAxisLabel"
  [yAxisLabel]="yAxisLabel"
  [autoScale]="true"
  [xScaleMin]="xScaleMin"
  [xScaleMax]="xScaleMax"
  [yScaleMin]="yScaleMin"
  [yScaleMax]="yScaleMax"
  [timeline]="timeline"
  [showGridLines]="true"
  [roundDomains]="true"
  [curve]="curve"
>
</ngx-charts-line-chart>

Or is there any other chart type that'd provide data points on the graph? I tested Bubble chart but it only works with time and number as X axis. I'd need to use a string as X axis.

check my solution here: https://stackoverflow.com/a/62467967/4016158 — Hasan Daghash, Jun 19 '20 at 10:13

score 1 · Answer 1 · edited Dec 02 '19 at 05:23

1

Try these lines in your sass :

chart-container {
    .line-highlight {
       display: block;
     }
}

edited Dec 02 '19 at 05:23

jkdev

11,360
15
54
77

answered Dec 02 '19 at 02:30

황성수

11
1

score 0 · Answer 2 · answered Aug 23 '22 at 07:30

The solution defined here is suits very best https://github.com/swimlane/ngx-charts/issues/462#issuecomment-783237600

@ViewChild("numberChart", {read: ElementRef, static: false})
numberChartRef: ElementRef;
...
chartRef.nativeElement.querySelectorAll("g.line-series path").forEach((el) => {
     el.setAttribute("stroke-width", "10");
     el.setAttribute("stroke-linecap", "round");
});

How to highlight Data Points Always in a Line Chart with NGRX?

2 Answers2