CODEWITHSUNDEEP
javascripthighcharts
alloyoussef
alloyoussef

Reputation: 777

highcharts type bubble with static Y-axis list

In highcharts type bubble (X-axis:dates, Y-axis:persons), what options I should use in order to have the Y-axis displays each person with a horizontal line so that it intersects with the X-axis line and have the bubble in the intersection. I used a list of persons as 'categories' but it does not look good. 

$('#container').highcharts({

    chart: {
        type: 'bubble',
        plotBorderWidth: 1,
        zoomType: 'xy'
    },

    legend: {
        enabled: false
    },

    title: {
        text: 'Chart'
    },

    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: { // don't display the dummy year
            month: '%e. %b',
            year: '%b'
        },

        gridLineWidth: 1,
        title: {
            text: 'Date'
        }
    },

    yAxis: {
        categories: ['person A', 'person B', 'person C', 'person D', 'person E'],

        startOnTick: false,
        endOnTick: false,
        title: {
            text: 'People'
        },
        maxPadding: 0.2
    },

    tooltip: {
        useHTML: true,
        headerFormat: '<table>',
        pointFormat: '<tr><th colspan="2"><h3>Title</h3></th></tr>' +
            '<tr><th>Person:</th><td>{point.y}</td></tr>' +
            '<tr><th>Date:</th><td>{point.x}</td></tr>' +
            '<tr><th>Number of calls:</th><td>{point.z}</td></tr>',
        footerFormat: '</table>',
        followPointer: true
    },

    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                format: '{point.z} calls'
            }
        }
    },

    series: [{
        data: [
            { x: Date.UTC(2003, 9, 21), y: 1, z: 13},
            { x: Date.UTC(2003, 9, 30), y: 2, z: 14},
            { x: Date.UTC(2003, 9, 21), y: 2, z: 16},
            { x: Date.UTC(2003, 9, 30), y: 1, z: 7},
            { x: Date.UTC(2003, 9, 21), y: 3, z: 5},
            { x: Date.UTC(2003, 9, 30), y: 4, z: 8 }
        ]
    }]

});

chart Current Chart

Expected chart: Expected chart (The lines I crossed need to be shifted to the position in red)

Upvotes: 0

Views: 433

Answers (1)

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

You need to set tickmarkPlacement as 'on' value.

yAxis: {
  categories: ['person A', 'person B', 'person C', 'person D', 'person E'],
  tickmarkPlacement: 'on',
  startOnTick: false,
  endOnTick: false,
  title: {
    text: 'People'
  },
  maxPadding: 0.2
},

Example: http://jsfiddle.net/hqykwrjd/

Upvotes: 3

Related Questions