# change_item_height_and_margin.js

var data1 = [
    {
        value: {
            start: "11/17/2015",
            end: "11/29/2015",
        },
        icon: "https://robohash.org/illonihilfacilis.bmp?size=50x50&set=set1",
        name: "Person 1" // if the value contain both icon and name, default tooltip will show the name value, you can change default tooltip, see Tooltip examples for more details
    }, {
        value: {
            start: "11/16/2015",
            end: "11/21/2015",
        },
        icon: "https://robohash.org/nequemaioresaut.jpg?size=50x50&set=set1"
    }, {
        value: {
            start: "11/15/2015",
            end: "11/19/2015",    
        },
        icon: "https://robohash.org/aperiamipsumnatus.bmp?size=50x50&set=set1"
    }, {
        value: {
            start: "11/18/2015",
            end: "11/26/2015",    
        },
        icon: "https://robohash.org/quoseligendivoluptatum.jpg?size=50x50&set=set1"
    }, {
        value: {
            start: "11/17/2015",
            end: "11/18/2015",    
        },
        icon: "https://robohash.org/voluptatesetmolestiae.png?size=50x50&set=set1"
    }
];

var options1 = {
    id: "demo1", 
    width: 1100, 
    height: 250,
    data: {
        plain: data1,
    },
    labelMargin: 0,
    itemHeight: 40, /* size of icon scale base on item's height */
    itemMargin: 5,
    title: {
        text: "Change Label to Icon"
    },
    axis: {
        x: {
            label: {
                text: ""
            },
            tick: {
                format: d3.time.format("%d-%m-%Y")
            }
        }
    },
};
var timeline = new C9.TimeLine(options1);
timeline.draw();