Chartjs-How to add overlay color to chart.js pie chart segment?

Create a new canvas object and position it under the actual chart. This new chart has the split data values. Make sure that the datapoints in your original chart that are split have a transparent background so that the underlying splits show through.

Preview

HTML

<div class="splitContainer">
  <canvas id="canvas" height="300" width="800"></canvas>
  <canvas class="canvasSplit" id="canvas2" height="300" width="800"></canvas>
</div>

CSS

.splitContainer {
  position: relative;
}

.canvasSplit {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
}

Script

var dataPiChart2 = [
  {
    value: 200,
    color:"rgba(247, 70, 74, 0.6)",
    label: "PHP1"
  },
  {
    value: 150,
    color:"rgba(247, 70, 74, 0.2)",
    label: "PHP2"
  },
  // values that are not split remain as is
  {
    value: 100,
    color: "#46BFBD",
    label: "JavaScript"
  },
  {
    value: 500,
    color: "#FDB45C",
    label: "HTML"
  }
];

new Chart(document.getElementById('canvas2').getContext("2d")).Pie(dataPiChart2, {
  segmentShowStroke: false
});

var dataPiChart = [
  {
    value: 350,
    // transparent show the split shows through
    color:"rgba(247, 70, 74, 0.2)",
    highlight: "rgba(247, 70, 74, 0.7)",
    label: "PHP"
  },

Fiddle – http://jsfiddle.net/ww8qpdvw/