How to change the background color of a chart?

Hi everyone, Iโ€™m using the regular chart widget to create some bar charts. Currently I am playing around with json to โ€œpimpโ€ them. As I donโ€™t have any IT background, I am struggling a little bit with the syntax. So I copied the basic syntax from the documentation and already could change the font & color of the chart:  {   "layout": {    "font":{         "family": "72-Web,Arial,Helvetica,sans-serif",         "size": 16,         "color": "#FFFFFF"         },     "paper_bgcolor": "#000000",   (this changes the background of the legend as you can see on the image)     "backgroundColor": "#F5DEB3",  (this basically does nothing?)     },           "configuration": {    },   "charts": {     "LineChart": {       "layout": {        },       "data": {    },       "configuration": {    }   },     "AreaChart": {      },     "BubbleChart": {   },     "TimeSeries": {        },     "ColumnChart": {                "layout": {       }    },   "BarChart": {   },     "PieChart": {    },    "HeatMap": {      } } My chart looks like this now: So, does anyone know how I can get that background behind the bars to be black, too? Where and what do I need to insert? Many thanks in advance, Laura
2 answers

Hi Laura,

you mean like so? (open the image for full size):


You can use the class ‘xy’ and give it the color you want.

Create your own class “chart-red” for instance that you set to the chart widget in the modeler, and using sass you can define this color

.chart-red {

      .xy {

           fill: red;



If you don’t know how to add custom classes you can read this (old, but still valid) blog: 


Good luck!


Hey there,


I did it by adding to the Layout Options (Properties of chart widget → Advanced → tick the Advanced Mode) the following: 


"plot_bgcolor": "rgb(0, 0, 0)"


I really recommend for the others who also are kind of IT-dummies; there you have thousands of examples of charts and it is indeed very easy and quick to copy :)


thanks a lot to everyone!