Search code examples
highchartstooltip

How to Format HighChartsJS ToolTip so it Only shows one X-axis?


This is the code I'm currently using in my graph, my issue is that I can't seem to format the tooltip so that only one X-Axis value appears, what you can see in the image below, basically I'd like full control over how X and Y points are posted as of now I'm getting an uninvited X axis guest. I can't seem to find a reasonable distinction between this system and any example which would explain why this is happening or how to block it.

https://drive.google.com/file/d/0B9EllFfWHFFVT1JaMEp4ZG9xYXc/view sorry had to post an external image cause I spend too little time on here...

         //call in the quants
            $(function () {
                $('#container1').highcharts({
                    chart: {
                        type: 'area'
                    },
                    title: {
                        text: 'Cost Of Program'
                    },
                    subtitle: {
                        text: 'Price of The Program'
                    },
                    xAxis: {
                        title: {
                            enabled: true,
                            text: 'Weeks '
                        },
                        categories: xAxis
                    }, 
                    yAxis: {
                        title: {
                            text: 'Cost'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        pointFormat: 'Weeks In: {point.x}, {series.name}: {point.y}'
                    },
                    plotOptions: {
                        area: {
                            pointStart: 0,
                            marker: {
                                enabled: false,
                                symbol: 'circle',
                                radius: 2,
                                states: {
                                    hover: {
                                        enabled: true
                                    }
                                }
                            }
                        }
                    },
                    series: [{
                        name: 'Money Youll Win Back If You Quit',
                        data: winMoney 
                    },{
                        name: 'How Much Youll Lose If You Quit',
                        data: loseMoney
                    }, {
                        name: 'Cost of the Program (cumulative)',
                        data: ourFee
                    }]
                });
            });
        }

Solution

  • tooltip: {
        pointFormat: 'Weeks In: {point.x}, {series.name}: {point.y}',
        headerFormat: ""
    },