C3.js bar chart

Bar chart with the C3.js adapter

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<div id="chart"></div>

JavaScript

chartData=[
  ['data1',60,10,4,20],
  ['data2',30,30,5,20],
  ['data3',30,30,4,20]

]

var chart = c3.generate({
    bindto: '#chart',
    size: {
        height: 500,
    },
    data: {
        columns: chartData,
        colors:{
          data1:'#00af50',
          data2:'#F7931E',
          data3: '#FF0000'
        },
        names:{
          data1:'namedata1',
          data2:'namedata2',
          data3:'namedata3'

        },

        type:'bar',
     
        labels: {
          //format: function (v, id, i, j) { return "Default Format"; },
          format: {
                  
           data1: function (v, id, i, j) { 
             return "text 30 characters->.........."; 
           },
            data2: function (v, id, i, j) { 

             return "Format for data2"; 
           },
            data3: function (v, id, i, j) { 

             return "other text"; 
           },
          }
        }
    },
     
   
    tooltip: {
        show: false
    },    
    legend: {
        show: false
    },
    axis: {
        rotated: true,
        x: {
            type: 'category',
            categories: ['001', '002','003','004'],
             tick: {
             
             format: function (d) { 
              return "" ; }
            }
        }        
    }    
});

var arrayOfPics = [
  "http://lorempixel.com/40/40/abstract",
  "http://lorempixel.com/40/40/animal",
  "http://lorempixel.com/40/40/business",
  "http://lorempixel.com/40/40/cats",
  "http://lorempixel.com/40/40/sports",
  "http://lorempixel.com/40/40/food"
];


d3.selectAll('.c3-axis-x .tick')
  .each(function(d,i){
    // clear tick contents and replace with image
    var self = d3.select(this);
  //  self.selectAll("*").remove();
    self.append('image')
      .attr("xlink:href", arrayOfPics[i])
      .attr("x", -40)
      .attr("y", -20)
      .attr("width", 25)
      .attr("height", 25);
});

d3.select('.c3-axis-x').attr("clip-path", "");

d3.selectAll('.c3-axis-x .tick')
 ...