title: How to create multi color vertical bar chart in d3.js (version 4 and up) using specific json data?
body: <p>i am working the typescript project</p>
  
  <p>i will expect the multicolored bar Chart</p>
  
  <p><strong>the Json data is:</strong></p>
  
  <pre><code>const OutputData = [  { Date: '01/01/18', TotalPercentage: 40, Data: [{ Percentage: 40, color: 'red' }] },
                             { Date: '02/01/18', TotalPercentage: 60, Data: [{ Percentage: 20, color: 'green' }, { Percentage: 20, color: 'red' }, { Percentage: 20, color: 'Yellow' }] },
                             { Date: '03/01/18', TotalPercentage: 75, Data: [{ Percentage: 35, color: 'blue' }, { Percentage: 10, color: 'green' },  { Percentage: 30, color: 'red' }] },
                             { Date: '04/01/18', TotalPercentage: 80, Data: [{ Percentage: 30, color: 'green' }, { Percentage: 50, color: 'red' }] },
                             { Date: '05/01/18', TotalPercentage: 95, Data: [{ Percentage: 95, color: 'red' }] },
                             { Date: '06/01/18', TotalPercentage: 100, Data: [{ Percentage: 70, color: 'blue' }, { Percentage: 30, color: 'red' }] } ];
  </code></pre>
  
  <p><strong>Expected Output is</strong> </p>
  
  <p><a href="https://i.stack.imgur.com/P3w7w.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P3w7w.png" alt="Expected Output"></a></p>