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?

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?

• javascript
• dojo
• dojox.charting

2 Answers 2

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

chart1.addSeries("Languages", [
    { y: var1, fill: "#BD48E9" },
    { y: var2, fill: "#FA4848" },
]);

You add the following code before calling render method

chart1.addSeries("MyData", [var1, var2],
        {plot: "other", stroke: {color:"red"}, fill: "lightgreen"}
);
chart1.render();