c3.js tooltip - make static и style

Question

У меня есть c3.js stacked barchart, который обновляется, когда вы наводите курсор мыши на карту Leaflet, и мне нужна подсказка, чтобы быть статичной, так как иначе пользователь будет нависнуть над другими областями карты и измените данные в барчарте, прежде чем на самом деле дойдете до него. Тем не менее, я новичок в кодировании и особенно новичок в C3, и я не могу обойти, как сделать всплывающую подсказку статичной. Кроме того, кто-нибудь знает, как стилизовать подсказку позже? Я только нашел очень сложные примеры онлайн, но мне кажется, что я смогу сделать это где-нибудь после создания диаграммы. Любая помощь будет высоко оценена!

Вот мой код:

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 
    }); 
    } 

Answer 1

Просто измените позицию в подсказке:

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

Это позволит установить всплывающую подсказку, чтобы всегда быть в верхней точке. Таким образом, он остается в той же координате y (сверху: 0), но следует за значением точек x. Вы можете пойти дальше и настроить его на одну позицию на странице.

Проверить эту скрипку я поставил вместе: http://jsfiddle.net/thatOneGuy/owhxgaqm/185/

Этот вопрос поможет вам: C3 charts - contents of tooltip clickable

Если вы хотите его видимым все время просто добавить этот код:

var originalHideTooltip = chart.internal.hideTooltip 
chart.internal.hideTooltip = function() { 
    setTimeout(originalHideTooltip, 100) 
};