Unique Fill colors for dojox pie chart

Question

I am creating a pie chart that has two slices of the pie. I know I can add a fill property and a color to say what color I want the entire pie chart but I want to have one slice of the pie chart blue and the other slice green.

majpieChart = new Chart("majorPieChart");
        majpieChart.setTheme(Claro).addPlot("default", {
            type: "Pie",
            font: "normal normal 10pt Tahoma",
            fontColor: "#1c3923",
            labelWiring: "#1c3923",
            radius: 100,
            labelStyle: "columns",
            htmlLabels: true,
            startAngle: -10,
            fill : {colors: [ {offset: 0, color: "#00ff78"},
                              {offset: 1, color: "#7f0043"}
                            ]
                    }
        }).addSeries("Major",majBreak);

I tried this new fill hoping it would give me the same effect requested above but it gives more of a rippling color looking effect. Any thoughts?

tik27 tik27 · Accepted Answer · 2013-12-18T23:49:27

you can create your own simple Theme, this is the simple theme, if you want gradients then would have to create a more complicated theme. http://dojotoolkit.org/documentation/tutorials/1.8/charting/

require([
    "dojox/charting/Chart",
    "dojox/charting/themes/Claro", "dojox/charting/plot2d/Pie",
    "dojox/charting/SimpleTheme",
    "dojo/domReady!"], function (Chart, Claro, Pie, theme) {
    chartData = [{
        x: 1,
        y: 19021
    }, {
        x: 1,
        y: 12837
    }, ];
    majpieChart = new Chart("majorPieChart");
    majpieChart.setTheme(new theme({
        colors: [
            "#00ff78",
            "#7f0043",
            "#8ecfb0",
            "#f8acac",
            "#cc4482"]
    })).addPlot("default", {
        type: "Pie",
        font: "normal normal 10pt Tahoma",
        fontColor: "#1c3923",
        labelWiring: "#1c3923",
        radius: 100,
        labelStyle: "columns",
        htmlLabels: true,
        startAngle: -10,
    }).addSeries("Major", chartData);

    majpieChart.render();
});

Fiddle::http://jsfiddle.net/YL2Mf/

UPDATE You can also add the fill color to the chart data:

chartData = [{
    x: 1,
    y: 19021,
    fill:"green"
}, {
    x: 1,
    y: 12837,
    fill:"yellow"
}, ];

Fiddle::http://jsfiddle.net/theinnkeeper/a56Y9/1/

Unique Fill colors for dojox pie chart

1 Answers