Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ngx charts: Line chart define line width

I'm using ngxChart for a project, everything is fine, but I just find the line width very thin and I just can't figure out how to get it bigger.

Any help?

like image 371
Hadrien Delphin Avatar asked Oct 24 '25 10:10

Hadrien Delphin


1 Answers

Add the following rule to your global styles.scss file:

/* Make lines in line chart thick, with rounded ends */
g.line-chart > g:last-of-type > g:nth-child(n) g.line-series > path {
  stroke-width: 10;
  stroke-linecap: round;
}

The n in g:nth-child(n) can be replaced with a number that references the number of the line that you want to modify (e.g. 0 for the first line), or something like 2n for every second line.

And obviously the width of 10 can be changed to any width.

like image 198
Ollie Avatar answered Oct 27 '25 00:10

Ollie