[Chartjs]-Chart.js 3.7.1 where to go with my plugins?

by

2👍

✅

This is because your options where totally wrong, the options does not have an options object in it and a plugins object. The options object is an object with all the options in it. So if you have a custom plugin you also need to define it in there. Rest of your config is also still wrong with lot of V2 syntax like the title, and scales config. For all changes please read the migration guide

const titleTooltip_diagramm_fokus = (tooltipItems) => {
  return "Betroffen";
};
const labelTooltip_diagramm_fokus = (tooltipItems) => {
  return "Tooltip";
};

const data_diagramm_fokus = {
  datasets: [{
    label: ["Positive Value"],
    backgroundColor: "rgba(255,0,0,0.2)",
    borderColor: "#000",
    data: [{
      x: 10,
      y: 9,
      r: 10
    }]
  }, {
    label: ["Negative Value"],
    backgroundColor: "rgba(255,0,0,0.2)",
    borderColor: "#000",
    data: [{
      x: -5,
      y: -5,
      r: 5
    }]
  }, {
    label: ["Beteiligte / Rollen 3"],
    backgroundColor: "rgba(255,0,0,0.2)",
    borderColor: "#000",
    data: [{
      x: -10,
      y: -9,
      r: 6
    }]
  }, ]
};

const options_diagramm_fokus = {
  responsive: true,
  maintainAspectRatio: true,
  title: {
    display: false,
    text: "Identifiziere die größten fokus"
  },
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: false,
        max: 10,
        min: -10
      },
      scaleLabel: {
        display: true,
        labelString: "schwacher Einfluss / starker Einfluss"
      }
    }],
    xAxes: [{
      ticks: {
        beginAtZero: false,
        max: 10,
        min: -10
      },
      scaleLabel: {
        display: true,
        labelString: "starke Unterstützung / starker Zweifel"
      }
    }]
  },
  plugins: {
    legend: {
      display: false
    },
    plugin_diagramm_fokus: {
      topLeft: "#9DC3E6",
      topRight: "#2E75B6",
      bottomRight: "#BDD7EE",
      bottomLeft: "#DEEBF7",
    },
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          var rLabel = (data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].r - 2);
          var label = data.datasets[tooltipItem.datasetIndex].label || "";

          if (label) {
            label += ": ";
          }
          label += "(" + tooltipItem.xLabel + " / ";
          label += tooltipItem.yLabel + ") | ";
          label += "Betroffenheit: " + rLabel;
          return label;
        }
      }
    }
  }
};

const plugin_diagramm_fokus = {
  id: "plugin_diagramm_fokus",
  beforeDraw(chart, args, options) {
    const {
      ctx,
      chartArea: {
        left,
        top,
        right,
        bottom
      },
      scales: {
        x,
        y
      }
    } = chart;
    const midX = x.getPixelForValue(0);
    const midY = y.getPixelForValue(0);
    ctx.save();
    ctx.fillStyle = options.topLeft;
    ctx.fillRect(left, top, midX - left, midY - top);
    ctx.fillStyle = options.topRight;
    ctx.fillRect(midX, top, right - midX, midY - top);
    ctx.fillStyle = options.bottomRight;
    ctx.fillRect(midX, midY, right - midX, bottom - midY);
    ctx.fillStyle = options.bottomLeft;
    ctx.fillRect(left, midY, midX - left, bottom - midY);
    ctx.restore();
  }
};

const config_diagramm_fokus = {
  type: "bubble",
  data: data_diagramm_fokus,
  options: options_diagramm_fokus,
  plugins: [plugin_diagramm_fokus]
};


const diagramm_fokus = new Chart(
  document.getElementById("diagramm_fokus").getContext("2d"),
  config_diagramm_fokus,
);
<h2>
  Hello!
</h2>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="diagramm_fokus"></canvas>

Leave a comment