Ngx-charts: Persistent hover gradient in line chart

Created on 12 Feb 2019  路  2Comments  路  Source: swimlane/ngx-charts

I'm submitting a ... (check one with "x")

  • [ ] bug report - search github for a similar issue or PR before submitting
  • [ ] feature request
  • [x] support request - use StackOverflow (add the ngx-charts tag) or the gitter chat for support questions

Current behavior
On highlighting a point in the graph, a nice gradient background is added to the series. Is there a way to make it persistent?

screenshot 2019-02-12 at 11 53 11

Please tell us about your environment:
Mac OSX 10.14.2

  • ngx-charts version:
    10.0.0

  • Angular version: x.x.x
    7.2.2

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
    , Chrome 71.0.3578.98

  • Language: [all | TypeScript X.X | ES6/7 | ES5]
    Typescript

Most helpful comment

On your scss/css file, place this code:

.ngx-charts .line-highlight {
    display: block;
}

I highly recommend placing the chart inside a _.chart-container_ class to increase the selector specificity to override the default display: none property.

Cheers!

All 2 comments

On your scss/css file, place this code:

.ngx-charts .line-highlight {
    display: block;
}

I highly recommend placing the chart inside a _.chart-container_ class to increase the selector specificity to override the default display: none property.

Cheers!

Had to use !important to get it taken into account:

.ngx-charts .line-highlight {
    display: block !important;
}
Was this page helpful?
0 / 5 - 0 ratings

Related issues

ronybarbosa picture ronybarbosa  路  3Comments

lokeshdaiya picture lokeshdaiya  路  3Comments

tobigit picture tobigit  路  4Comments

amcdnl picture amcdnl  路  4Comments

emeric0101 picture emeric0101  路  3Comments