Open yashjit opened 4 years ago
I have the same issue
Try to use my solution at https://github.com/swimlane/ngx-charts/issues/740
@yashjit @MrBob007 you guys can mention all the themes you are using in your application instead of just dark as in my case.
There seems to be a problem in which color gets covered by fill in CSS.
Describe the bug I have 3 themes in my angular app and on theme change color scheme change in app, but ngx-charts does not respond to it. I Applied all guide provided in issue #740, but it does not work if you change theme at run time, OnTheme change i change the class .dark to respective class but no effect. As SVG generated earlier so may be need to generate SVG again if theme change ?
To Reproduce Steps to reproduce the behavior: My Code -
changeTheme(name: string): void { this.themeChanges$.next({ name, previous: this.currentTheme }); this.currentTheme = name; }
this.themeService.onThemeChange() .subscribe((theme: any) => { console.log(
Theme changed to ${theme.name}
); this.currentTheme = theme.name; this.initGraph(); });3 . CSS -
/ ngx-chart Dynamic style / .dark { /
Backgrounds */ $color-bg-darkest: #13141b; $color-bg-darker: #1b1e27; $color-bg-dark: #232837; $color-bg-med: #2f3646; $color-bg-light: #455066; $color-bg-lighter: #5b6882;
/**
Text */ $color-text-dark: #72809b; $color-text-med-dark: #919db5; $color-text-med: #A0AABE; $color-text-med-light: #d9dce1; $color-text-light: #f0f1f6; $color-text-lighter: #fff;
background: $color-bg-darker;
.ngx-charts {
text { stroke: #fff !important; }
.tooltip-anchor { fill: rgb(255, 255, 255); }
.gridline-path { stroke: $color-bg-med; }
.refline-path { stroke: $color-bg-light; }
.reference-area { fill: #fff; }
.grid-panel { &.odd { rect { fill: rgba(255, 255, 255, 0.05); } } }
.force-directed-graph { .edge { stroke: $color-bg-light; } }
.number-card { p { color: $color-text-light; } }
.gauge { .background-arc { path { fill: $color-bg-med; } }
.gauge-tick { path { stroke: $color-text-med; }
} }
.linear-gauge { .background-bar { path { fill: $color-bg-med; } }
.units { fill: $color-text-dark; } }
.timeline { .brush-background { fill: rgba(255, 255, 255, 0.05); }
.brush { .selection { fill: rgba(255, 255, 255, 0.1); stroke: #aaa; } } }
.polar-chart .polar-chart-background { fill: rgb(30, 34, 46); }
}
.chart-legend { .legend-labels { background: rgba(255, 255, 255, 0.05) !important; }
.legend-item { &:hover { color: #fff; } }
.legend-label { &:hover { color: #fff !important; }
.active { .legend-label-text { color: #fff !important; } } }
.scale-legend-label { color: $color-text-med; } }
.advanced-pie-legend { color: $color-text-med;
.legend-item { &:hover { color: #fff !important; } } }
.number-card .number-card-label { font-size: 0.8em; color: $color-text-med; } }
.default { /**
Backgrounds */ $color-bg-darkest: #ffffff; $color-bg-darker: #fafafa; $color-bg-dark: #f8f8f8; $color-bg-med: #f0f0f0; $color-bg-light: #dfdfdf; $color-bg-lighter: #e2e2e2;
/**
Text */ $color-text-dark: #272727; $color-text-med-dark: #2b2b2b; $color-text-med: #202020; $color-text-med-light: #1f1c1c; $color-text-light: #20243f; $color-text-lighter: #000000;
background: $color-bg-darker;
.ngx-charts {
text { fill: $color-text-lighter; stroke: $color-text-lighter; }
.tooltip-anchor { fill: #707070; }
.gridline-path { stroke: $color-bg-darkest; }
.refline-path { stroke: $color-bg-light; }
.reference-area { fill: rgb(78, 78, 78); }
.grid-panel { &.odd { rect { fill: rgba(255, 255, 255, 0.05); } } }
.force-directed-graph { .edge { stroke: $color-bg-light; } }
.number-card { p { color: $color-text-light; } }
.gauge { .background-arc { path { fill: $color-bg-med; } }
.gauge-tick { path { stroke: $color-text-med; }
} }
.linear-gauge { .background-bar { path { fill: $color-bg-med; } }
.units { fill: $color-text-dark; } }
.timeline { .brush-background { fill: rgba(255, 255, 255, 0.05); }
.brush { .selection { fill: rgba(255, 255, 255, 0.1); stroke: #aaa; } } }
.polar-chart .polar-chart-background { fill: #e0e0e0; }
}
.chart-legend { .legend-labels { background: rgba(20, 20, 20, 0.671) !important; }
.legend-item { &:hover { color: rgb(83, 83, 83); } }
.legend-label { &:hover { color: rgb(37, 37, 37) !important; }
.active { .legend-label-text { color: #000 !important; } } }
.scale-legend-label { color: $color-text-med; } }
.advanced-pie-legend { color: $color-text-med;
.legend-item { &:hover { color: #000 !important; } } }
.number-card .number-card-label { font-size: 0.8em; color: $color-text-med; } } **
Expected behavior It should change color of label, font-size but no effect seen.