bosch % bar

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .revenue {fill: url(#revenue);}
    .target-to-go {fill: #2c2279;}
    .target {fill: #2c2279;}
  </style>
</head>

<body>
  <svg>
  	<defs>
    	<linearGradient id="revenue">
        <stop offset="5%"  stop-color="#63b1e9"/>
        <stop offset="95%" stop-color="#9b71fc"/>
      </linearGradient>
    </defs>
  </svg>
  <script>
    //Data
    const people = [{
      name: 'John Perry',
      revenueTarget: 36000,
      revenueTargetToGo: 38000,
      revenue:36000
    },
    {
    	name: 'Theo Parrish',
      revenueTarget: 12881,
      revenueTargetToGo: 19402,
      revenue:8363  
    }, 
    {
    	name: 'Daj Spokoj',
      revenueTarget: 32890,
      revenueTargetToGo: 25594,
      revenue:90850  
    },
                   ];
    
    for (let i = 0; i < people.length; i++) {
      let values = [];
      for (let prop in people[i]) {
         if (prop != 'name') values.push(people[i][prop]);
      }
      people[i].max = d3.max(values);
    }
    
    //Variables
    const margin = {top: 50, right: 20, bottom: 20, left: 20};
    const barHeight = 60;
    const labelWidth = 100;
    const height = barHeight * people.length;
    const maxWidth = d3.max(people, d => d.max);
    
    
    
    
    var chartG = d3.select("svg")
      .attr("width", '100%')
      .attr("height", height + margin.top + margin.bottom)
    	.append('g')
    	.attr('class', 'chart')
    	.attr('transform', `translate(${margin.left}, ${margin.top})`);
    
    let svgWidth = d3.select('svg')
    	.node()
    	.getBoundingClientRect()
    	.width;
    
    
    let xScale = d3.scaleLinear()
    	.domain([0, maxWidth])
    	.range([0, svgWidth - 2 * margin.left - margin.right - labelWidth]);
    
    chartG.append('g')
    	.attr('class', 'axis')
    	.call(d3.axisBottom(xScale)
            .ticks(4)
        		.tickFormat(d3.format(".0s")))
    	.attr('transform', `translate(${labelWidth + margin.left}, ${height})`)
    
    let axis = d3.select('.axis');
    axis.select('path')
    	.attr('stroke', 'none')
    axis.selectAll('line')
    	.attr('y2', -height - margin.top)
    	.attr('stroke', 'gray')
    axis.select('line')
    	.attr('stroke', 'none')
    axis.select('text')
    	.attr('fill', 'none')

chartG.selectAll('g.row')
    	.data(people, d => d)
    	.enter()
    	.append('g')
    	.attr('class', 'row')
    	.attr('transform', (d, i) => `translate(0, ${i * barHeight})`)
    	.append('text')
    	.attr('class', 'label')
    	.text(d => d.name)
    	.attr('text-anchor', 'end')
    	.attr('transform', `translate(${labelWidth} , 0)`);
    
    
    	
		chartG.selectAll('.row')
    	.append('rect')
    	.attr('class', 'target-to-go')
    	.attr('width', d => xScale(d.revenueTargetToGo))
    	.attr('height', 3)
    	.attr('rx', 3)
    	.attr('transform', `translate(${labelWidth + margin.left}, -6.5)`)
    
    chartG.selectAll('.row')
    	.append('rect')
    	.attr('class', 'revenue')
    	.attr('width', d => xScale(d.revenue))
    	.attr('height', 10)
    	.attr('rx', 4)
    	.attr('transform', `translate(${labelWidth + margin.left}, -10)`)
    
    chartG.selectAll('.row')
    	.append('circle')
    	.attr('class', 'target')
    	.attr('r', 9)
    	.attr('transform', d => `translate(${labelWidth + margin.left + xScale(d.revenueTarget)}, -5)`)
    
    
    	
  </script>
</body>

https://d3js.org/d3.v4.min.js