Change default styling of horizontal bars in ngx-charts

Question

I am using ngx-charts [Link to Github Repo] for charting purpose in Angular. I am using version 8.x of Angular. This package is really easy to use and comes with good features. But, I can't seem to change the default styling of horizontal bars in horizontal bar chart. Here I am attaching the stackblitz demo which I have tried. I want red border at the bottom of all horizontal bars and also I want the Y-axis data labels above the bars.

Stackblitz Demo of ngx-chart

The problem is that the bars generated are in the svg format. So it gets little bit tricky.

Answer 1

I am not sure this will help you or not but in my opinion this is one the way to achieve your goal.

there is a stroke-dasharray SVG property for stroke.

for border-bottom I found the solution which i described below:

::ng-deep .ngx-charts .bar {
    stroke: red;
    stroke-dasharray: 0,X,Y,0;
}

Where Y is the value of your bar's Width and the X is the value of sum of Height and width of your bar.

I am sharing a demo of SVG stroke property this is not an ngx chart demo but in my opinion, it will help you if you can get the height and width of your chart element.

https://codepen.io/coderman-401/pen/dyoNgKg

Answer 2

ngx-chart uses svgs so you can edit them through css:

::ng-deep .ngx-charts .bar {
  stroke: red;
}

Stackblitz demo

Answer 3

There is no handle provided for this purpose, but you can always tweak svg like this to get desired changes:

let svgList = <HTMLScriptElement[]><any>document.getElementById(your_parent_Div_id).getElementsByTagName('path');

for (let svg of svgList) {
    event.target.style.stroke = 'black';
    event.target.style.strokeWidth = '4';
}