Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fill colour for individual bars in Dojo Chart?

This is likely fairly simple Q (learning the ropes with Dojo).

I have successfully created a bar chart in my web app.

// Create Chart
var chartDiv = dojo.create("div");
dijit.byId("someDiv").setContent(chartDiv);
var chart1 = dojox.charting.Chart2D(chartDiv);

chart1.addPlot("default", {
    type: "Bars",
    gap: 3
});
chart1.addAxis("x");
chart1.addAxis("y", {
    vertical: true,
    labels: [{
        value: 1,
        text: "Field1"
    }, {
        value: 2,
        text: "Field2"
    }]
});
chart1.addSeries("MyData", [var1, var2]);
chart1.render();

I see that you can create custom themes to your charts. However, I am thinking there must be a simpler way to define a colour (ideally a subtle gradient) for each of my bars. I am also restricted to using a dojo version served up by Esri, and not sure if that allows me to then create cutom themes.

There will only ever be 5 bars (2 in the above snippet).

i.e. I want to define a different color for each bar.

Can someone put me out of my misery and provide some guidance on how to achieve this?

like image 927
jakc Avatar asked Feb 04 '26 06:02

jakc


2 Answers

In hindsight, bit lazy on my side. Here is what worked for me:

chart1.addSeries("Languages", [
    { y: var1, fill: "#BD48E9" },
    { y: var2, fill: "#FA4848" },
]);
like image 56
jakc Avatar answered Feb 05 '26 20:02

jakc


You add the following code before calling render method

chart1.addSeries("MyData", [var1, var2],
        {plot: "other", stroke: {color:"red"}, fill: "lightgreen"}
);
chart1.render();
like image 35
Programmer Avatar answered Feb 05 '26 22:02

Programmer