0

I'm using a chartJS Horizontal Bar to visualize some data & the annotation plugin to add vertical lines in the plot area.

What I want to accomplish: showing annotation values/color-box in the tooltip.

What I've done thus far: I've added in bar charts to get the values in the tooltip. (see images & code below).

Where I'm stuck: I would like to hide/offset aBar 1 & aBar 2; in other words, I don't want these bars to appear at all, but I do want the entries to appear in the tooltip. (please see second image).

Current Output

enter image description here

Desired Output

enter image description here

Code

var ctx = document.getElementById("myChart").getContext("2d");

var myChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    labels: false, // RANGE
    datasets: [
        {
        type: 'horizontalBar',
        label: 'Bar 1',
        backgroundColor: 'rgba(121,185,29,0.85)',
        stack: 'Stack 0',
        data: [
            16        ],
        borderColor: 'white',
        borderWidth: 0.5
        },
        {
        type: 'horizontalBar',
        label: 'Bar 2',
        backgroundColor: 'rgba(246,171,0,0.3125)',
        stack: 'Stack 0',
        data: [
            24        ]
        },
                        {
        type: 'horizontalBar',
        label: 'Bar 3',
        backgroundColor: 'rgba(226,33,27,0.5)',
        stack: 'Stack 0',
        data: [
            80        ]
        },
                        {
        type: 'horizontalBar',
        label: 'aBar 1',
        backgroundColor: '#20C5CB',
        stack: 'Stack 1',
        data: [
            6        ]
        },
                        {
        type: 'horizontalBar',
        label: 'aBar 2',
        backgroundColor: '#7f3391',
        stack: 'Stack 2',
        data: [
            120        ]
        },
            ]
  },
  options: {
    responsive: true,
    legend:false,
    responsive: true,
    maintainAspectRatio: false, 
    title: false,
    tooltips: {
        mode: 'index',
        intersect: true,
        bodyFontSize:10,
        titleFontSize:0,
        titleMarginBottom:0,
    },
    plugins: {
        labels:false,
    },
        scales: {
        xAxes: [{
            ticks: {
                max: 124,
                min: 0,
                stepSize: 10
            }
        }]
    },
        annotation: {
      annotations: [
        {
            type: 'line',
            mode: 'vertical',
            scaleID: 'x-axis-0',
            value: 6,  
            borderColor: '#20C5CB',
            borderWidth: 3,
            borderDash: [6,3],
            label: {
                enabled: false,
                content: 'Annotation 2',
                fontSize: 8,
                fontStyle: 'normal',
                rotation: 0,
                xPadding: 2,
                yPadding: 2,
                cornerRadius: 1,
            }
        },
        {
            type: 'line',
            mode: 'vertical',
            scaleID: 'x-axis-0',
            value: 120,
            borderColor: '#7f3391',
            borderWidth: 3,
            label: {
                enabled: false,
                content: 'Annotation 1',
                fontSize: 8,
                fontStyle: 'normal',
                rotation: 0,
                xPadding: 2,
                yPadding: 2,
                cornerRadius: 1,
            }
        }
      ]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js"></script>
<canvas id="myChart"></canvas>
Ryan Dorn
  • 679
  • 2
  • 8
  • 20

1 Answers1

0

Add the hidden tag to datasets of the series you want to hide like this:

type: 'horizontalBar',
label: 'aBar 1',
backgroundColor: '#20C5CB',
stack: 'Stack 1',
hidden: true,
data: [6],

and use a callback to the label tooltip like this:

tooltips: {
  mode: 'index',
  intersect: true,
  bodyFontSize:10,
  titleFontSize:0,
  titleMarginBottom:0,
  callbacks: {
    label: function(tooltipItem, data) {
      return data.datasets.map(ds => ds.label + ': ' + ds.data[tooltipItem.index])
    }
  }
},

Found solution here: Chartjs show hidden data on tooltip

demathos
  • 41
  • 4