score:1

Accepted answer

to customize the legend box color you will need to use a custom html legend, there you can specify it with css, for the pink grid lines you can use the scriptable options. for both see example:

const getorcreatelegendlist = (chart, id) => {
  const legendcontainer = document.getelementbyid(id);
  let listcontainer = legendcontainer.queryselector('ul');

  if (!listcontainer) {
    listcontainer = document.createelement('ul');
    listcontainer.style.display = 'flex';
    listcontainer.style.flexdirection = 'row';
    listcontainer.style.margin = 0;
    listcontainer.style.padding = 0;

    legendcontainer.appendchild(listcontainer);
  }

  return listcontainer;
};

const htmllegendplugin = {
  id: 'htmllegend',
  afterupdate(chart, args, options) {
    const ul = getorcreatelegendlist(chart, options.containerid);

    // remove old legend items
    while (ul.firstchild) {
      ul.firstchild.remove();
    }

    // reuse the built-in legenditems generator
    const items = chart.options.plugins.legend.labels.generatelabels(chart);

    items.foreach(item => {
      const li = document.createelement('li');
      li.style.alignitems = 'center';
      li.style.cursor = 'pointer';
      li.style.display = 'flex';
      li.style.flexdirection = 'row';
      li.style.marginleft = '10px';

      li.onclick = () => {
        const {
          type
        } = chart.config;
        if (type === 'pie' || type === 'doughnut') {
          // pie and doughnut charts only have a single dataset and visibility is per item
          chart.toggledatavisibility(item.index);
        } else {
          chart.setdatasetvisibility(item.datasetindex, !chart.isdatasetvisible(item.datasetindex));
        }
        chart.update();
      };

      // color box
      const boxspan = document.createelement('span');
      boxspan.style.background = options.legendboxcolor || item.fillstyle;
      boxspan.style.bordercolor = item.strokestyle;
      boxspan.style.borderwidth = item.linewidth + 'px';
      boxspan.style.display = 'inline-block';
      boxspan.style.height = '20px';
      boxspan.style.marginright = '10px';
      boxspan.style.width = '20px';

      // text
      const textcontainer = document.createelement('p');
      textcontainer.style.color = options.legendtextcolor || item.fontcolor;
      textcontainer.style.margin = 0;
      textcontainer.style.padding = 0;
      textcontainer.style.textdecoration = item.hidden ? 'line-through' : '';

      const text = document.createtextnode(item.text);
      textcontainer.appendchild(text);

      li.appendchild(boxspan);
      li.appendchild(textcontainer);
      ul.appendchild(li);
    });
  }
};

const options = {
  type: 'bar',
  data: {
    labels: ["red", "blue", "yellow", "green", "purple", "orange"],
    datasets: [{
      label: '# of votes',
      data: [12, 19, 3, 5, 2, 3],
      borderwidth: 1,
      backgroundcolor: ["red", "blue", "yellow", "green", "purple", "orange"]
    }]
  },
  options: {
    scales: {
      x: {
        grid: {
          color: (line) => ((line.index === 2 || line.index === 3) ? 'pink' : 'rgba(0,0,0,0.1)'),
          linewidth: (line) => ((line.index === 2 || line.index === 3) ? 6 : 1)
        }
      }
    },
    plugins: {
      htmllegend: {
        // id of the container to put the legend in
        containerid: 'legendcontainer',
        legendboxcolor: 'blue',
        legendtextcolor: 'blue'
      },
      legend: {
        display: false,
      }
    }
  },
  plugins: [htmllegendplugin]
}

const ctx = document.getelementbyid('chartjscontainer').getcontext('2d');
new chart(ctx, options);
<body>
  <div id="legendcontainer"></div>
  <canvas id="chartjscontainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.0.2/chart.js"></script>
</body>


Related Query

More Query from same tag