0

I have a c3.js stacked barchart that updates when you hover over a Leaflet map, and I need the tooltip to be static as otherwise the user will hover over other areas of the map and change the data in the barchart, before actually reaching it. However, I'm new to coding and especially new to C3 and I can't get around how to make the tooltip static. Also, does anyone know how to style the tooltip later? I have only found very complex examples online, but it feels like I should be able to do it somewhere after I generate the chart. Any help would be much appreciated!

Here is my code:

function getMiniChartData(properties) {
var values = [
    ['rape', rape[properties['gss_code']]],
    ['other sexual', other_sexual[properties['gss_code']]]];

console.log(values);
return values;
 }

var chart;

function drawMiniChart(properties) {
console.log('drawing mini chart');
var data = getMiniChartData(properties);

chart = c3.generate({
    bindto: '#minichart',
    color: {
                pattern: ['#E31A1C', '#BD0026']
            },
    point: {
             show: false
              },

            tooltip: {
            show: true
              },
    data: {
        columns: data,
        type: 'bar',
        groups: [
            ['rape', 'other sexual']
        ]
    },
    axis: {
        y: {
            max:60,
            min:0
        }
    },
    grid: {
        y: {
            lines: [{
                value: 0
            }]
        }
    }
});
 }

function updateMiniChartData(properties) {
console.log('updating mini chart');
var data = getMiniChartData(properties);
chart.load({
        columns: data
    });
  }
Patricia Nilsson
  • 1
  • 2

1 Answers1

0

Just edit the position in the tooltip :

position: function () {
            var position = c3.chart.internal.fn.tooltipPosition.apply(this, arguments);
            position.top = 0;
            return position;
        }

This will set the tooltip to always be at the top of the point. So it stays at the same y coordinate (top:0) but follows the points x value. You could go further and set it to stay at one position on the page.

Check this fiddle I have put together : http://jsfiddle.net/thatOneGuy/owhxgaqm/185/

This question will help you out : C3 charts - contents of tooltip clickable

If you want it visible all the time just add this code : 

var originalHideTooltip = chart.internal.hideTooltip
chart.internal.hideTooltip = function () {
    setTimeout(originalHideTooltip, 100)
};
Community
  • 1
  • 1
thatOneGuy
  • 9,977
  • 7
  • 48
  • 90
  • thatOnGuy, funny you would see this. I was looking at your example to try to get it to work with my code some days ago. However, it doesn't seem to be working. This is where I put it: tooltip: { position: function () { var position = c3.chart.internal.fn.tooltipPosition.apply(this, arguments); position.top = 0; return position; } }, data(...) but it makes no difference. – Patricia Nilsson May 17 '16 at 12:52
  • Do you add contents ? Just follow the example I have shown. Or implement you own on JSFiddle and ill see what i can do – thatOneGuy May 17 '16 at 12:57
  • your tooltip is the bar chart on the right hand side ? – thatOneGuy May 17 '16 at 13:04
  • Well, the tooltip is the info window that displays the exact number of rape and other sexual offences. I want this information to be always visible, so that the user doesn't have to hover over the bar chart to make it visible. – Patricia Nilsson May 17 '16 at 15:22
  • Added to the answer. If you looked at the example I gave you a link to, it solves your problem there. – thatOneGuy May 17 '16 at 15:27
  • Thank you for all of your time, but it doesn't work. Console tells me it cannot read property 'internal' of undefined. I also found this example (https://jsfiddle.net/5vbeb4k8/) using the same snippet, and this example specifies the position just like you do in your example, while my code binds the chart to a div with a certain id. I was thinking maybe that could have something to do with it. – Patricia Nilsson May 17 '16 at 15:53
  • is it possible to put your code together in jsfiddle ? The one that doesnt work, or a simplified version atleast – thatOneGuy May 17 '16 at 17:14
  • As far as I know, JSFiddle works with one HTML, one CSS and one JS file per project, and I have several JS-files as I have both the Leaflet map and the chart and several sources of external data. So I don't think that's possible. The c3 stacked barchart with the tooltip that's not working (or not showing when I want it to) is the code I shared from the beginning. – Patricia Nilsson May 19 '16 at 09:47