Horizontal Bar Chart

Highlighted X-axis tick text

by trent1000

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css">
<div id='chart'></div>

CSS

.c3-tooltip {

    background: rgba(241, 241, 241, 0.9)!important;;
    padding: 20px;
    border-style: solid;
    border-color: rgba(94, 160, 156, 0.6)!important;
    border-width: 1px;
    text-align: left;
    
}

.c3-grid line {
  stroke: #d8d8d8!important;
  stroke-dasharray: 0!important;
}

.c3-bar {
   fill: rgba(94, 160, 156, 0.6)!important;
}

.c3-axis-x {
    width:200px;
}

.c3-axis-x .tick {
  fill: grey;
}

.c3-axis-y .tick {
  fill: grey;
  
}

.c3-axis-y2 .tick {
  fill: grey
}



.c3-axis-y2-label {
  fill: grey!important;
} 

.c3-line {
  stroke-width: 1px;
  fill: grey!important;
}

.c3 line, .c3 path {
    fill: none;
    stroke: #c8c8c8!important;
}

JavaScript

var chart = c3.generate({
    
    size: {
        height: 300,
        width: 500,
    },
     
    data: {  
    x:'x',
       columns: [
            ['nr',123,200,241,300,212,300],
            ['x','com','net','org','io','co','tv'],
        ],
        type : 'bar',
        keys: {
            x: 'Name',
            value: ['nr']
        }
    },
   
    axis: {
      
        rotated: true,
        x: {
            type: 'category',
            tick: {multiline:false,}
        },
        y: {
            padding: {top:0, bottom:0},
            tick: { multiline:false, 
                    format: d3.format('s') }
        }
    },
    bar: {
        width: {
            ratio: 0.5
        }
    },
    grid: {
        x: {
            show: false
        },
        y: {
            show: true
        }
    },
    legend: {show: false},
    tooltip: {
        format: {
            value: function (value, id) {
                var format = id === 'nr' ? d3.format(',') : function (d) { return  d + ' suffix'; };
                return format(value);
            }
        }
    }
});  

var highLightTick = d3.selectAll('.c3-axis-x .tick')
  .filter(function(){ 
    return d3.select(this).text() === 'io'
  })
  .style('fill', 'black')
  .style('font-size', '14px')
  .style('font-weight', 'bold');