How to increase line chart width in ng2-charts?-CodePudding

I am trying to render a line chart using "ng2-charts": "^2.3.0" and "chart.js": "^2.8.0",. Chart is displaying as expected but only problem is that I am not able to increase the line width with borderWidth property.

Code:

import { SingleDataSet, Label, Color } from "ng2-charts";
import { ChartType, ChartOptions } from "chart.js";

public barChartType1: ChartType = "line";


  public lineChartOptions: ChartOptions = {
    responsive: true,
    legend: { display: false },
    scales: {
      yAxes: [
       {
        display: false,
        ticks: {
          beginAtZero: false
        },
        scaleLabel: {
          display: true,
          labelString: '',
          fontSize: 20,
         }
       },
      ]
    
    },
    
    elements: {
      point:{
          radius: 0,
          borderWidth: 50
      }
    },
  };


  public lineChartColors: Color[] = [
    {
      borderColor: '#5081bd',
      backgroundColor: 'transparent',
    },
  ];

Template:

                        <canvas baseChart  height="30vh" width="80vw"
                            [colors]="lineChartColors" 
                            [datasets]="barChartDataSets1[customdata.index]"
                            [labels]="barChartLabels1[customdata.index]" 
                            [options]="lineChartOptions" 
                            [chartType]="barChartType1" 
                            (chartHover)="chartHovered($event)" 
                            (chartClick)="chartClicked($event)">
                        </canvas>

Inputs:

barChartDataSets1 [{"data":["2.00","2.00","2.00","2.00","2.00","2.00","2.00","2.00"]
barChartLabels1 [" "," "," ","ans1"," "," "," ","ans2"]

Output:

Is there any solution for this and why changing borderWidth property isn't working on it?

CodePudding user response：

This is because you placed the option in the wrong namespace instead of using options.elements.point you need to place it in options.elements.line:

elements: {
  point: {
    radius: 0,
  },
  line: {
    borderWidth: 8
  }
},