Chartjs-How can I add a border to the columns on this graph.js

by

0👍

✅

added option borderWidth and changed value of borderColor in the datasets.

https://codepen.io/fver1004/pen/MWVOJpR?editors=1010

google.charts.load('current', { 
    'packages': ['corechart', 'bar']
  });
  google.charts.setOnLoadCallback(initChart);;

  function initChart() {
    URL = "https://docs.google.com/spreadsheets/d/1MV4chXniMBHj1ROAIf-BZR3LsoN-HT180pUwivU5Jbc/edit#gid=2112195720";
    var query = new google.visualization.Query(URL);
    query.setQuery('select *');
    query.send(function(response) {
      handleQueryResponse(response);
    });
  }

  function handleQueryResponse(response) {
    var data = response.getDataTable();
    var columns = data.getNumberOfColumns();
    var rows = data.getNumberOfRows();
    // console.log(data.toJSON());

    const colors = ['#eeeeee', '#23F0C7'];
    const border_colors = ['#ececec', '#21DEC5'];
    dataj = JSON.parse(data.toJSON());
    // console.log(dataj.cols[0].label);
    const labels = [];
    for (c = 1; c < dataj.cols.length; c++) {
      if (dataj.cols[c].label != "") {
        labels.push(dataj.cols[c].label);
      }

    }
    // console.log(labels);
    const datasets = [];
    for (i = 0; i < dataj.rows.length; i++) {
      const series_data = [];
      for (j = 1; j < dataj.rows[i].c.length; j++) {
        if (dataj.rows[i].c[j] != null) {
          if (dataj.rows[i].c[j].v != null) {
            series_data.push(dataj.rows[i].c[j].v);
          } else {
            series_data.push(0);
          }
        }

      }
      var dataset = {
        label: dataj.rows[i].c[0].v,
        backgroundColor: colors[i],
        borderColor: border_colors[i],
        borderWidth: 4,
        data: series_data
      }

      datasets.push(dataset);

    } 
    console.log(datasets);

    const chartdata = {
      labels: labels,
      datasets: datasets
    };
    var canvas = document.getElementById("myChart");
    var setup = {
      type: 'bar',
      data: chartdata,
      options: {
        plugins: {
          title: {
            display: true,
            text: dataj.cols[0].label
          }
        },
        responsive: true,
      }
    }
    chart = new Chart(canvas, setup); 
    
  }

Leave a comment