How to fill bars with custom svg instead of a plain color in ngx-charts?

Question

I was trying to build a pattern as shown in below Stackblitz

In the above Stackblitz I was not using any external library other than Angular.

I recently came across this beautiful library called ngx-charts which simplifies the work a lot while building complex charts.

It came up with several customising options such as adjusting [Width, Height], Legend Position, Custom Color Scheme etc.,

However, I still couldn't figure if there is an easy way to replace the color schemes with an SVG just like I did it above,

This is how patterns are currently shown:

Can I fill the solid colors with SVGs?

no easy way i guess... going through this (https://stackoverflow.com/questions/53878582/fill-a-svg-path-with-a-full-background-image) i was able to insert components (using inspect element) to get what you wanted... — Akber Iqbal, May 12 '19 at 05:05
That is in svg. Not ngx-charts. The question here is about ngx-charts. — Sai Nikhil, May 12 '19 at 06:58
Yes yes, do inspect element with ngx-charts and this would work for you — Akber Iqbal, May 12 '19 at 07:15

score 1 · Answer 1 · answered May 16 '19 at 22:13

Sadly, you can't fill the bars with a custom svg pattern without creating your own custom bar chart type.

The out-of-the-box bar chart configuration does let you use gradient colors within a bar, but doesn't allow for a custom svg. (See the code here https://github.com/swimlane/ngx-charts/blob/master/src/bar-chart/bar.component.ts Lines 26-36 are the svg bar definition.)

1 Answers1