Search code examples
javascriptangularngx-charts

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?

Solution

  • 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.