Label color problem

[AngeloCG97]

I am using the radar in a project and I have a problem with the labels, when I put two labels the background color of a data set is falling on top of the second, someone can help me with that problem, here I leave the data set that I am sending and the configuration that I am using for the radar, I also share a video of the problem.

ERROR:

Block.Producer.Community.Ratings.for.CryptoLions.-.EOS.Rate.-.Google.Chrome.2021-09-08.17-17-12_Trim.mp4

DATASET:

bpValidData= {
	datasets: [{
		backgroundColor: "rgba(14, 165, 214, .6)",
		borderColor: "rgba(14, 165, 214, .6)",
		borderJoinStyle: "round",
		data: (5) [2.4000000953674316, 4.666666507720947, 3.799999952316284, 4.5, 2.200000047683716],
		label: "General Rating",
		lineTension: 0.3,
		pointBackgroundColor: "rgba(14, 165, 214, .6)",
		pointBorderColor: "#fff",
		pointHoverBackgroundColor: "#fff",
		pointHoverBorderColor: "rgba(14, 165, 214, 1)"
		}, {
		backgroundColor: "rgba(182, 210, 155, .6)",
		borderColor: "rgba(182, 210, 155, .6)",
		borderJoinStyle: "round",
		data: (5) [2.6666667461395264, 5.5, 5.5, 4.25, 1.3333333730697632],
		label: "Eden Rating",
		lineTension: 0.3,
		pointBackgroundColor: "rgba(182, 210, 155, .6)",
		pointBorderColor: "#fff",
		pointHoverBackgroundColor: "#fff",
		pointHoverBorderColor: "rgba(182, 210, 155, 1)"
	}],
	labels:[ "Community", "Development", "Infrastructure", "Transparency", "Trustiness" ]
}

CONFIGURATION:

<Radar
      data={bpValidData}
      style={{
        margin: 'auto',
        width: sizes.width,
        height: sizes.height
      }}
      options={{
        animation: {
          duration: false
        },
        plugins: {
          legend: {
            display: showLabel,
            labels: {
              font: {
                size: 14
              }
            }
          }
        },
        scales: {
          r: {
            ticks: {
              display: false,
              min: 0,
              max: 10,
              stepSize: 2
            },
            grid: {
              circular: true,
              lineWidth: 4
            },
            suggestedMin: 1,
            suggestedMax: 10,
            angleLines: { color: '#e5e5e5', lineWidth: 4 },
            pointLabels: {
              fontColor: '#443F5B',
              font: {
                size: 12
              }
            }
          }
        },
        layout: {
          padding: {
            bottom: 10
          }
        },
        chartArea: {
          backgroundColor: '#f8f8f8',
          strokeColor: '#e5e5e5',
          lineWidth: 4
        },
        tooltips: {
          enabled: true,
          callbacks: {
            label: (tooltipItem, data) =>
              `${data.labels[tooltipItem.index]}: ${
                data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]
              }`,
            title: (tooltipItem, data) => {
              const titleModeled = tooltipItem.reduce(
                (acc, current, index) => {
                  if (current.datasetIndex === acc.prevDatasetIndex) return acc

                  const label = `${acc.title} ${index ? '||' : ''} ${
                    data.datasets[current.datasetIndex].label
                  }`

                  return {
                    title: label,
                    prevDatasetIndex: current.datasetIndex
                  }
                },
                { title: '', prevDatasetIndex: null }
              )

              return titleModeled.title
            }
          }
        }
      }}
    />

[LeeLenaleee]

V2 is not supported anymore, but also cant seem to reproduce it: https://jsfiddle.net/Leelenaleee/pL8vzcxo/4/

[kurkle]

Not reproducible with v3 either: https://jsfiddle.net/dmgs1v2t/
Maybe you have a plugin that messes with the CanvasRenderingContext? (missing save() and restore()). Maybe related to the chartArea options.

[AngeloCG97]

Not reproducible with v3 either: https://jsfiddle.net/dmgs1v2t/
Maybe you have a plugin that messes with the CanvasRenderingContext? (missing save() and restore()). Maybe related to the chartArea options.

Thanks for this answer, the problem was the restore method in another configuration file.