SVG Label Text Wrapper

Text Wrapper

by Reddy Uppathi

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>

CSS

.bar { fill: #44AAAA; }
text.bar {fill: #94a3b0;}

.x .ticktext {
	font-weight:500;
font-size:15px;

}

.positive  {
font-weight:500;
	font-size:15px;
  fill: #26B910;
}
.negative  {
font-weight:500;
	font-size:15px;
  fill: #DD0014;
}
.moderate  {
font-weight:500;
	font-size:15px;
  fill: #a9a5a5;
}
g.tick text {
    fill: #94a3b0;
	font-weight:500;
	font-size:13px;
}

JavaScript

// set the dimensions and margins of the graph
var margin = {top: 30, right: 20, bottom: 50, left: 20},
    width = 350 - margin.left - margin.right,
    height = 150 - margin.top - margin.bottom;

// set the ranges
var x = d3.scaleBand()
          .range([0, width])
           .paddingInner(0.6) 
            .paddingOuter(0.1) 
var y = d3.scaleLinear()
          .range([height, 0]);
          
// append the svg object to the body of the page
// append a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", 
          "translate(" + margin.left + "," + margin.top + ")");

		  
		  
// null values not accepted , replace nulls with 0
var data2 = {
"successCode": "SUCCESS",
"successMessage": "",
"data": {
"HouseholdPenetration": {
"barData": [
  {
"graphVal": "91.62",
"axisLabel": "52 Weeks Ending 05/28/16",
"al": ""
},
  {
"graphVal": "91.62",
"axisLabel": "52 Weeks Ending 05/28/16",
"als": ""
}
],
"diffVal": "0.0"
},
"CategoryLoyalty": {
"barData": [
  {
"graphVal": "100",
"axisLabel": "52 Weeks Ending 05/28/16"
},
  {
"graphVal": "100",
"axisLabel": "52 Weeks Ending 05/28/16"
}
],
"diffVal": "0.0"
},
"ItemBuyingRate": {
"barData": [
  {
"graphVal": "43.15",
"axisLabel": "52 Weeks Ending 05/28/16"
},
  {
"graphVal": "43.15",
"axisLabel": "52 Weeks Ending 05/28/16"
}
],
"diffVal": "0.0"
},
"2+TimeBuyers": {
"barData": [
  {
"graphVal": "92.07",
"axisLabel": "52 Weeks Ending 05/28/16"
},
  {
"graphVal": "92.07",
"axisLabel": "52 Weeks Ending 05/28/16"
}
],
"diffVal": "0.0"
},
"onDeal": {
"barData": [
  {
"graphVal": "25.86",
"axisLabel": "52 Weeks Ending 05/28/16"
},
  {
"graphVal": "25.86",
"axisLabel": "52 Weeks Ending 05/28/16"
}
],
"diffVal": "0.0"
},
"PurchaseFrequency": {
"barData": [
  {
"graphVal": "11.15",
"axisLabel": "52 Weeks Ending...