ChartJS Email HTTP Request API

by

1👍

✅

Which version of Chart.js are you using because it seems to be working fine with your config.

quickChart: https://quickchart.io/chart?bkg=%23002A5E&c={%20type:%20%27bar%27,%20data:%20{%20labels:%20[%27Investment%27,%20%27Sustainable%27],%20datasets:%20[%20{%20label:%20%27Tonnes%20of%20CO2%20per%20year%27,%20data:%20[11,%205],%20borderWidth:%201,%20backgroundColor:%20[%20%27rgba(234,%2082,%204,%200.2)%27,%20%27rgba(0,%20121,%20109,%200.2)%27%20],%20borderColor:%20[%20%27rgba(234,%2082,%204,%201)%27,%20%27rgba(0,%20121,%20109,%201)%27%20],%20}%20]%20},%20options:%20{%20legend:%20{labels:%20{fontColor:%20%27white%27}},%20scales:%20{%20xAxes:%20[{ticks:%20{fontColor:%20%27white%27}}],%20yAxes:%20[{%20ticks:%20{%20beginAtZero:%20true,%20fontColor:%20%27white%27%20},%20gridLines:%20{%20color:%20%27rgba(255,%20255,%20255,%200.1)%27%20},%20}]%20}%20}%20}

var options = {
  type: 'bar',
  data: {
    labels: ['Investment', 'Sustainable'],
    datasets: [{
      label: 'Tonnes of CO2 per year',
      data: [11, 5],
      borderWidth: 1,
      backgroundColor: [
        'rgba(234, 82, 4, 0.2)',
        'rgba(0, 121, 109, 0.2)'

      ],
      borderColor: [
        'rgba(234, 82, 4, 1)',
        'rgba(0, 121, 109, 1)'

      ],
    }]
  },
  options: {
    legend: {
      labels: {
        fontColor: 'white'
      }
    },
    scales: {
      xAxes: [{
        ticks: {
          fontColor: 'white'
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true,
          fontColor: 'white'
        },
        gridLines: {
          color: 'rgba(255, 255, 255, 0.1)'
        },
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
canvas {
  background-color: #002A5E;
}
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>

Leave a comment