CODEWITHSUNDEEP
jsfiddlehighcharts
hamiltonjose
hamiltonjose

Reputation: 601

Highstock chart - Dates on same x axis and Crazy Tooltip

I am working with Highstock chart (from 'Point markers only' demo: http://www.highcharts.com/stock/demo/markers-only) and I noticed the below issues:

a) I noticed that the corresponding tooltips are crazy

b) I noticed that the dates were plotted right over the left edge, almost hiding the tooltip symbols...

You may want to take a look at the following jsfiddle: http://jsfiddle.net/xfJhq/1/

I thank you for any clue you might have.

Upvotes: 0

Views: 1367

Answers (2)

Mina Gabriel
Mina Gabriel

Reputation: 25100

since you mentioned you have more data to add here is what i would do :

NOTICE the tool tip reads one point per series hover so it return the nearest point to the mouse cursor 

     tooltip: {
            allowHTML: true,
            formatter: function() {
                console.log(this.points) ; 

            }
        },

the following object was the nearest point : 

return [
        key: "SALKTU - LEVEL ZERO"
        percentage: undefined
        point: xa
        series: c
        total: undefined
        x: 1324512000000
        y: 91
        __proto__: Object ]

jsFiddle

to solve this you need more than one yAxis

So i would do it this way 

         yAxis: [{
            title: {
                text: 'OHLC'
            },
            height:100,
            lineWidth: 2
        }, {
            title: {
                text: 'Volume'
            },
            top: 200,
            height: 100,
            offset: 0,
            lineWidth: 2
        } , {
        title: {
                text: 'max'
            },
            top: 320,
            height: 100,
            offset: 0,
            lineWidth: 2

        } ,{
        title: {
                text: 'min'
            },
            top: 450,
            height: 100,
            offset: 0,
            lineWidth: 2

        } ,
               ],

        series: [{
            type: 'column',
            name: 'RBWQCR - LEVEL ONE',
            data :[[1324512000000 ,81]]
        }, {
            type: 'column',
            name: 'JPXZTO - LEVEL EIGHT',

            yAxis: 1,
            data:[[1324512000000 ,81]]
        }, {
            type: 'column',
            name: 'CXRCTO - LEVEL THREE',

            yAxis: 2,
            data: [[1324512000000 ,81]]
        }, {
            type: 'column',
            name: 'FLOPAP - LEVEL FOUR',

            yAxis:3,
            data :[[1324512000000 ,81]]
        }]

working jsFiddle when you pass all your data your chart will looks better

if you don't like having each one in a separate series look at the following Example it is a little complicated but worth to try

Upvotes: 1

Hardik Mishra
Hardik Mishra

Reputation: 14877

As you have data for only one particular date.

Adding minPadding to your x axis will work.

Check updated fiddle : http://jsfiddle.net/xfJhq/2/

Note: I know that minPadding does not work on zoom and I have reported the same question to Highstock forums.

Upvotes: 0

Related Questions