Chartjs-ChartJS donut chart clipping the edges

by

1👍

✅

I am hoping you are using it with react

you need to wrap your import inside nested <div> and need to add display: flex for parent div and also need to remove offset:12
check following code snippet

        <div style={{ display: "flex" }}>
          <div>
            <Doughnut
              data={data}
              options={{
                plugins: {
                  legend: {
                    display: false,
                  },
                  tooltip: {
                    callbacks: {
                      label: function (context) {
                        return ` ${context.label}: ${context.formattedValue}%`;
                      },
                    },
                  },
                },
                borderRadius: 4,
                elements: {
                  arc: {
                    borderWidth: 0,
                  },
                },
              }}
            />
          </div>
        </div>

Leave a comment