locked
Hover HighChart Show only Phone Number RRS feed

  • Question

  • User194385433 posted

    Hi,

    In the below example , I need to show only the Phone Number of that user When Hover.
    (But now it is showing Name with Phone Number and Series Value)
    
    How can we achieve.
    
    <script src="http://code.highcharts.com/highcharts.js"></script>
    
    <div id="container" style="height: 400px"></div>
    
    $(function(){
        var chart1;
        $(document).ready(function(){
        var options = {
            colors: ["#3ACB35", "#DE3A15", "#FF9A00", "#00B8F1"],
            chart: {
                renderTo: 'container',
                type: 'bar',
                backgroundColor: 'black',
                borderColor: 'black',
                borderWidth: 0,
                className: 'dark-container',
                plotBackgroundColor: 'black',
                plotBorderColor: '#000000',
                plotBorderWidth: 0
            },
            credits: {
                enabled: false
            },
            title: {
                text: 'Count Per Category',
                style: {
                    color: 'white',
                    font: 'normal 22px "Segoe UI"'
                },
                align: 'left'
            },
            tooltip: {
                backgroundColor: 'rgba(0, 0, 0, 0.75)',
                style: {
                    color: '#F0F0F0'
                }
            },
            categories: {
                enabled: 'true'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0,
                itemStyle: {
                    font: '9pt Segoe UI',
                    color: 'white'
                },
                itemHoverStyle: {
                    color: 'grey'
                }
            },
            xAxis: {
                categories: ['Ramesh - Phone Number :9963', 'Mahesh - Phone Number: 5678', '', 'Ravi', 'Srikanth'],
                tickInterval: 1,
                labels: {
                    enabled: true,
                    formatter: function() {
                        
                        var values = this.value.split(" - ");
                        
                        if (values.length > 1) {                                                
                            return '<span title="' + values[1] + '">' + values[0] + '</span>';
                            
                        } else {
                            return this.value;
                        }                    
                    },
                    useHTML: true,
                    style: {
                        color: 'white'
                }
            },
                title: {
                    enabled: false
                },
                gridLineColor: '#222222'
            },
            yAxis: {
                title:
                {
                    enabled: true,
                    text: "Document Count",
                    style: {
                        fontWeight: 'normal',
                        color: 'white'
                    }
                },
                labels: {
                    style: {
                        color: 'white'
                }
            },
                gridLineColor: '#222222'
            },
            exporting: {
                enabled: false
            },
            plotOptions: {
                series: {
                    stacking: 'normal',
                    cursor: 'pointer'
                }
            },
            series: []
        };
    
        options.series = [{
                data: [3, 4, 4, 3, 9]
            }];
    
        chart1 = new Highcharts.Chart(options);
        });
    })
    
        

    Thanks,

    Sunday, March 27, 2016 6:02 AM

Answers

  • User2103319870 posted

    In the below example , I need to show only the Phone Number of that user When Hover. (But now it is showing Name with Phone Number and Series Value) How can we achieve.

    You can use the formatter function in HightCharts for tooltip and assign the values accordingly

    $(function () {
                var chart1;
                $(document).ready(function () {
                    var options = {
                        colors: ["#3ACB35", "#DE3A15", "#FF9A00", "#00B8F1"],
                        chart: {
                            renderTo: 'container',
                            type: 'bar',
                            backgroundColor: 'black',
                            borderColor: 'black',
                            borderWidth: 0,
                            className: 'dark-container',
                            plotBackgroundColor: 'black',
                            plotBorderColor: '#000000',
                            plotBorderWidth: 0
                        },
                        credits: {
                            enabled: false
                        },
                        title: {
                            text: 'Count Per Category',
                            style: {
                                color: 'white',
                                font: 'normal 22px "Segoe UI"'
                            },
                            align: 'left'
                        },
                        tooltip: {
                            backgroundColor: 'rgba(0, 0, 0, 0.75)',
                            style: {
                                color: '#F0F0F0'
                            },
                            formatter: function () {
                                //Get the X Axix value and split it based on hyphen
                                var values = this.x.split(" - ");
                                if (values.length > 1) {
                                    return '<span>' + values[1] + '</span>';
                                } else {
                                    return this.value;
                                }
                            }
                        },
                        categories: {
                            enabled: 'true'
                        },
                        legend: {
                            layout: 'vertical',
                            align: 'right',
                            verticalAlign: 'middle',
                            borderWidth: 0,
                            itemStyle: {
                                font: '9pt Segoe UI',
                                color: 'white'
                            },
                            itemHoverStyle: {
                                color: 'grey'
                            }
                        },
                        xAxis: {
                            categories: ['Ramesh - Phone Number :9963', 'Mahesh - Phone Number: 5678', '', 'Ravi', 'Srikanth'],
                            tickInterval: 1,
                            labels: {
                                enabled: true,
                                formatter: function () {
    
                                    var values = this.value.split(" - ");
    
                                    if (values.length > 1) {
                                        return '<span title="' + values[1] + '">' + values[0] + '</span>';
    
                                    } else {
                                        return this.value;
                                    }
                                },
                                useHTML: true,
                                style: {
                                    color: 'white'
                                }
                            },
                            title: {
                                enabled: false
                            },
                            gridLineColor: '#222222'
                        },
                        yAxis: {
                            title: {
                                enabled: true,
                                text: "Document Count",
                                style: {
                                    fontWeight: 'normal',
                                    color: 'white'
                                }
                            },
                            labels: {
                                style: {
                                    color: 'white'
                                }
                            },
                            gridLineColor: '#222222'
                        },
                        exporting: {
                            enabled: false
                        },
                        plotOptions: {
                            series: {
                                stacking: 'normal',
                                cursor: 'pointer'
                            }
                        },
                        series: []
                    };
    
                    options.series = [{
                        data: [3, 4, 4, 3, 9]
                    }];
    
                    chart1 = new Highcharts.Chart(options);
                });
            });
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, March 27, 2016 11:52 PM