C3: Bar Chart

by ti2005

HTML

<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<link rel="stylesheet" href="https://rawgit.com/masayuki0812/c3/master/c3.css">
<div id="chart1"></div>

JavaScript

var chart1 = c3.generate({
                size: {
                    height: 400,
                },
                data: {
                    type: 'bar',
                    json: [
                        { 'indicator': 'data1', 'Subject': 100 },

                    ],
                    color: function (color, d) {
                        if (d.id && d.value) {
                            if (d.value<=40) {
                                return 'red';
                            }
                            else if (d.value<=70) {
                                return 'orange';
                            }
                            else {
                                return 'limegreen';
                            }
                        }
                    },
                    keys: {
                        x: 'indicator',
                        value: ['Subject']
                    }
                }, 
                legend:{hide:true},
                axis: {
                    x: {
                        type: 'category',
                        tick: {
                            rotate: -55,
                            multiline: true

                        },
                        height: 190
                    },

                    y: {
                        show: false,
                        ticks: 3, // line added
                        padding: { top: 5, bottom: 0 },
                    }
                },
                bar: {
                    width: {
                        ratio: 0.1    
                    },
                },
                bindto: '#chart1'
            });