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?
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
}
},