small bar chart without axes, specific colors

[typpo]

small bar chart without axes, specific colors

[typpo]

Based on the documentation, you are looking for something like this:

{
  type: 'bar',
  data: {
    datasets: [{
      backgroundColor: 'green',
      data: [50]
    }, {
      backgroundColor: 'yellow',
      data: [100]
    }, {
      backgroundColor: 'orange',
      data: [150]
    }, {
      backgroundColor: 'red',
      data: [200]
    }]
  },
  options: {
    scales: {
      xAxes: [{display: false}],
      yAxes: [{display: false}]
    },
    legend: {display: false}
  }
}

https://quickchart.io/chart?c=%7B%0A%20%20type%3A%20%27bar%27%2C%0A%20%20data%3A%20%7B%0A%20%20%20%20datasets%3A%20%5B%7B%0A%20%20%20%20%20%20backgroundColor%3A%20%27green%27%2C%0A%20%20%20%20%20%20data%3A%20%5B50%5D%0A%20%20%20%20%7D%2C%20%7B%0A%20%20%20%20%20%20backgroundColor%3A%20%27yellow%27%2C%0A%20%20%20%20%20%20data%3A%20%5B100%5D%0A%20%20%20%20%7D%2C%20%7B%0A%20%20%20%20%20%20backgroundColor%3A%20%27orange%27%2C%0A%20%20%20%20%20%20data%3A%20%5B150%5D%0A%20%20%20%20%7D%2C%20%7B%0A%20%20%20%20%20%20backgroundColor%3A%20%27red%27%2C%0A%20%20%20%20%20%20data%3A%20%5B200%5D%0A%20%20%20%20%7D%5D%0A%20%20%7D%2C%0A%20%20options%3A%20%7B%0A%20%20%20%20scales%3A%20%7B%0A%20%20%20%20%20%20xAxes%3A%20%5B%7Bdisplay%3A%20false%7D%5D%2C%0A%20%20%20%20%20%20yAxes%3A%20%5B%7Bdisplay%3A%20false%7D%5D%0A%20%20%20%20%7D%2C%0A%20%20%20%20legend%3A%20%7Bdisplay%3A%20false%7D%0A%20%20%7D%0A%7D

[randallt]

Does quickchart.io not support the 'indexable' attribute of some of these Chart.js options? We should be able to specify the colors in an array within the dataset, instead of separate datasets.

https://www.chartjs.org/docs/latest/general/options.html#indexable-options
https://www.chartjs.org/docs/latest/charts/bar.html#dataset-properties

When I tried this, it didn't work as expected:

{
type: 'bar',
data: {
datasets: [{
backgroundColor: ['green','yellow','orange','red'],
data: [50,100,150,200]
}]
},
options: {
scales: {
xAxes: [{display: false}],
yAxes: [{display: false}]
},
legend: {display: false}
}
}

https://quickchart.io/chart?c=%7Btype:'bar',data:%7Bdatasets:%5B%7BbackgroundColor:%5B'green','yellow','orange','red'%5D,data:%5B50,100,150,200%5D%7D%5D%7D,options:%7Bscales:%7BxAxes:%5B%7Bdisplay:false%7D%5D,yAxes:%5B%7Bdisplay:false%7D%5D%7D,legend:%7Bdisplay:false%7D%7D%7D

But maybe I got something wrong...

[randallt]

Got it to work. You HAVE to put in empty labels for some reason:

https://quickchart.io/chart?c=%7Btype:%27bar%27,data:%7Blabels:[%27%27,%27%27,%27%27,%27%27],datasets:%5B%7BbackgroundColor:%5B%27green%27,%27yellow%27,%27orange%27,%27red%27%5D,data:%5B50,100,150,200%5D%7D%5D%7D,options:%7Bscales:%7BxAxes:%5B%7Bdisplay:false%7D%5D,yAxes:%5B%7Bdisplay:false%7D%5D%7D,legend:%7Bdisplay:false%7D%7D%7D