Search code examples
reactjstypescriptreact-chartjs

Chartjs double bar chart cannot have multiple properties with the same name


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]
                    }

Solution

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