Skip to content

Impossible add more than one tooltip for char #79

@SalahAdDin

Description

@SalahAdDin

Hi.

In this momment i'm trying doing a multibarchart with multistacked values, very hard, in one requierement is add tooltip for each bar.

I'm doing this in code:

extra_serie_wins = {
        "tooltip": {"y_start": "Wins ", "y_end": " times in the cup "},
    }

    extra_serie_ties = {
        "tooltip": {"y_start": "Ties ", "y_end": " times in the cup "},
    }

    extra_serie_defeats = {
        "tooltip": {"y_start": "Defeats ", "y_end": " times in the cup "},
    }

    """
    colombia = [[1,2,3],[4,5,6],[7,8,9],[10,11,12],[13,14,1]]

    chartdata = {
        'x': xdata,
        'name1': countries[0], 'y1': colombia, 'extra1': extra_serie_wins,
    }
    """

    chartdata = {
        'x': xdata,
        'name1': countries[0], 'y1': ydataw[0], 'extra1': extra_serie_wins,
        'name2': countries[0], 'y2': ydatat[0], 'extra2': extra_serie_ties,
        'name3': countries[0], 'y3': ydatad[0], 'extra3': extra_serie_defeats,
        'name4': countries[1], 'y4': ydataw[1], 'extra4': extra_serie_wins,
        'name5': countries[1], 'y5': ydatat[1], 'extra5': extra_serie_ties,
        'name6': countries[1], 'y6': ydatad[1], 'extra6': extra_serie_defeats,
        'name7': countries[2], 'y7': ydataw[2], 'extra7': extra_serie_wins,
        'name8': countries[2], 'y8': ydatat[2], 'extra8': extra_serie_ties,
        'name9': countries[2], 'y9': ydatad[2], 'extra9': extra_serie_defeats,
    }

And django renders me this:

chart.yAxis
                .tickFormat(d3.format(',f'));
            chart.xAxis
                .tickFormat(d3.format(',f'));

                    chart.tooltipContent(function(key, y, e, graph) {
                        var x = String(graph.point.x);
                        var y = String(graph.point.y);
                                            if(key == 'Colombia'){
                        var y = 'Wins ' +  String(graph.point.y)  + ' times in the cup ';
                    }
                    if(key == 'Colombia'){
                        var y = 'Ties ' +  String(graph.point.y)  + ' times in the cup ';
                    }
                    if(key == 'Colombia'){
                        var y = 'Defeats ' +  String(graph.point.y)  + ' times in the cup ';
                    }
                    if(key == 'Argentina'){
                        var y = 'Wins ' +  String(graph.point.y)  + ' times in the cup ';
                    }
                    if(key == 'Argentina'){
                        var y = 'Ties ' +  String(graph.point.y)  + ' times in the cup ';
                    }
                    if(key == 'Argentina'){
                        var y = 'Defeats ' +  String(graph.point.y)  + ' times in the cup ';
                    }
                    if(key == 'Brasil'){
                        var y = 'Wins ' +  String(graph.point.y)  + ' times in the cup ';
                    }
                    if(key == 'Brasil'){
                        var y = 'Ties ' +  String(graph.point.y)  + ' times in the cup ';
                    }
                    if(key == 'Brasil'){
                        var y = 'Defeats ' +  String(graph.point.y)  + ' times in the cup ';
                    }

                        tooltip_str = '<center><b>'+key+'</b></center>' + y + ' at ' + x;
                        return tooltip_str;
                    });

      chart.showLegend(true);

And, of course! I haven't only tool tip, the last: "tooltip": {"y_start": "Defeats ", "y_end": " times in the cup "},
chart_1

What's can i do for solve this?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions