Edit in JSFiddle

var r = Raphael("pie1"),
    wdth = 100,
    hght = 90;
var values = [575, 476, 451];
var labels = ["ABC (575)", "DEF (476)", "GHI (451)"];
var pie1 = r.piechart(wdth, hght, 70, values, {
    legend: labels,
    legendpos: "east",
    hovermode: "Both",
    highlight: true
});

// draw a donutchart for the region
values = [634, 575, 217, 76];
labels = ["ace (634)", "bdf (575)", "gij (217)", "klp (76)"];

var r2 = Raphael("pie2");
pie2 = r2.piechart(wdth, hght, 70, values, {
    legend: labels,
    legendpos: "east",
    hovermode: "Legend",
    highlight: true
});

// when the mouse is over the first chart, we want to show some other data in the second chart
var newValues = {
    "ABC": {
        values: [575],
        labels: ["bdf (575)"]
    },
    "DEF": {
        values: [375, 76],
        labels: ["ace (375)", "klp (76)"]
    },
    "GHI": {
        values: [259, 217],
        labels: ["ace (259)", "gij (217)"]
    }
};
pie1.hover(function() {
    // change the second graph with the new values
    var labl = this.label[1].attr("text").replace(/ \([0-9]+\)/, "");
    pie2.changeValues(newValues[labl].values, {
        legend: newValues[labl].labels,
        matchLegend: function(curL, newL) {
            return curL.replace(/ \([0-9]+\)/, "") == newL.replace(/ \([0-9]+\)/, "")
        }
    });
}, function() {
    // set back the original values
    pie2.changeValues(values, {
        legend: labels,
        matchLegend: function(curL, newL) {
            return curL.replace(/ \([0-9]+\)/, "") == newL.replace(/ \([0-9]+\)/, "")
        }
    });
})

<div id="pie1"></div>
<div id="pie2"></div>

div { float:left;width:280px }