ChartJS Email HTTP Request API

Given my chartJS config below

var ctx = document.getElementById('myChart').getContext('2d');      
        Chart.defaults.global.defaultFontColor = 'rgba(255, 255, 255, 1)';
        Chart.defaults.global.defaultFontFamily = 'Arial';
                
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['Investment', 'Sustainable'],
                datasets: [{
                    label: 'myLabel',
                    data: [11, 5],
                    backgroundColor: [
                        'rgba(234, 82, 4, 0.2)',
                        'rgba(0, 121, 109, 0.2)'
                        
                    ],
                    borderColor: [
                        'rgba(234, 82, 4, 1)',
                        'rgba(0, 121, 109, 1)'
                        
                    ],
                    borderWidth: 1
                }]
            },
              options: {                         
                legend: {
                    labels: {                        
                        display: true
                    }
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        },
                        gridLines: {
                        color: 'rgba(255, 255, 255, 0.1)'
                      },
                        scaleLabel: {
                        display: true,
                      },
                   }],
                }
            }
        });

I need to get something as close as the following
enter image description here

Using Quickchart API, I am submitting the config through the URL, but I am having trouble setting the labels color? options:{legend:{labels:{fontColor: 'white'}},

https://quickchart.io/chart?c={type:%27bar%27,data:{labels:[%27Investment%27,%27Sustainable%20%27],datasets:[{label:%27myLabel%27,data:[11,5],backgroundColor:%20[%27rgba(234,%2082,%204,%200.2)%27,%27rgba(0,%20121,%20109,%200.2)%27],borderColor:%20[%27rgba(234,%2082,%204,%201)%27,%27rgba(0,%20121,%20109,%201)%27]}]}}

Gives me
enter image description here

49 thoughts on “ChartJS Email HTTP Request API”

  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>
    Reply

Leave a Comment