CODEWITHSUNDEEP
angularngx-charts
Beto Shiver
Beto Shiver

Reputation: 49

Is there a way to change the color of a reference line in ngx charts?

I am doing an ngx-line-chart and added a line using the referenceLines input. The issue is that the line is barely noticeable as by default it is coming out in the same color as the but more opaque.

I've tried using the customColors property as follows:

customColors = {referenceLines: ['#cc0000']}

However, this didn't work.

I also tried working with the scheme but also couldn't figure out a way to affect this

Anyone knows a way to override it so I can make it red or any other color that'll make it more noticeable?

Thanks

Upvotes: 1

Views: 1561

Answers (1)

Youp Bernoulli
Youp Bernoulli

Reputation: 5655

ReferenceLines is an Object[] of {name: string, value: number}. So the preferred way doesn't provide a clean way to specify a reference(grid) line color.

From the source code at GitHub:

<svg:g *ngFor="let refLine of referenceLines">
      <svg:g *ngIf="showRefLines" [attr.transform]="transform(refLine.value)">
        <svg:line
          class="refline-path gridline-path-horizontal"
          x1="0"
          [attr.x2]="gridLineWidth"
          [attr.transform]="gridLineTransform()"
        />
        <svg:g *ngIf="showRefLabels">
          <title>{{ tickTrim(tickFormat(refLine.value)) }}</title>
          <svg:text
            class="refline-label"
            [attr.dy]="dy"
            [attr.y]="-6"
            [attr.x]="gridLineWidth"
            [attr.text-anchor]="textAnchor"
          >
            {{ refLine.name }}
          </svg:text>
        </svg:g>
      </svg:g>

It can be seen that, unfortunately, there isn't any color applied to the reference(grid) line 😟. Neither directly from the ReferenceLine specification ({name: string, value: number} nor from the custom color scheme.

So there are now two options left over:

  1. Directly (with ng-deep) target the right svg element with a css class or
  2. Add a data series for all your x-values with a constant y value.

In the case I have at hand (providing multiple reference lines that might be switched by user interaction) I choose for the second option. It is a (dirty) workaround which results in the desired functionality.

Upvotes: 1

Related Questions