I am attempting to plot a double bar chart in React.js using Typescript, however I receive the error 'An object literal cannot have multiple properties with the same name in strict mode'. The strange thing is the error is only on the property backgroundColor, even though all of the other properties have the same name.
I have attempted to set 'strict' to false in my tsconfig,json file, but when I use npm start it gets set back to true with the message:
The following changes are being made to your tsconfig.json file:
- compilerOptions.strict to be suggested value: true (this can be changed)
Here is the code I am using to set the chart options in chart.js
datasets: [
{
label: "Surveys Started",
backgroundColor: gradientFill,
borderColor: "#f96332",
pointBorderColor: "#FFF",
pointBackgroundColor: "#FFF",
backgroundColor: '#FF3333',
pointBorderWidth: 2,
pointHoverRadius: 4,
pointHoverBorderWidth: 1,
pointRadius: 4,
fill: true,
borderWidth: 1,
data: this.state.data[0]
},
{
label: "Surveys Completed",
backgroundColor: gradientFill,
pointBackgroundColor: "#2CA8FF",
backgroundColor: '#3733FF',
pointBorderWidth: 2,
pointHoverRadius: 4,
pointHoverBorderWidth: 1,
pointRadius: 4,
fill: true,
borderWidth: 1,
data: this.state.data[1]
}
Looks like there is an issue with gradientFill
variable itself.
Comment out the gradientFill
variable, set the backgroundColor
with a string (e.g. '#fff'
) and see if the error disappears. If it does, then review implementation of the gradientFill
.