CODEWITHSUNDEEP
javascriptangularjsd3.jsnvd3.js
skr07
skr07

Reputation: 725

nvd3 tooltip is showing index instead of label

I am having problem nvd3 tooltip in multichart(multilinechart). Here my XAxis label are JAN,FEB,MAR... DEC. But when i mouse over in the graph it is showing 0,1,2,3.. 11 as tooltip title. But i need to show JAN,FEB.. DECinstead of index. Here is my chart option code,

{
  "chart": {
    "type": "multiChart",
    "height": 400,
    "interpolate": "linear",
    "showLegend": false,
    "margin": {
      "top": 50,
      "right": 100,
      "bottom": 60,
      "left": 100
    },
    "reduceXTicks": false,
    "useVoronoi": false,
    "useInteractiveGuideline": true,
    "duration": 500,
    "xAxis": {
      "axisLabel": "MONTHLY",
      "tickPadding": 10,
      "tickSize": 1,
      "tickValues": [
        0,
        1,
        2,
        3,
        4,
        5,
        6
      ]
    },
    "yAxis1": {
      "axisLabel": "Left",
      "tickPadding": 10
    },
    "yAxis2": {
      "axisLabel": "Right",
      "width": 60,
      "tickPadding": 10
    },
    "yDomain1": [
      0,
      5
    ],
    "yDomain2": [
      0,
      100
    ]
  }
}

Here is the issue in image (Need to show FEB but it is showing 1), enter image description here Here is second(Need to show MAR but it is showing 2) enter image description here

Please some one help to identify the issue,

Thanks in Advance.

Upvotes: 0

Views: 120

Answers (1)

Robsonsjre
Robsonsjre

Reputation: 1606

You can try to use a method interactiveLayer.tooltip.headerFormatter to edit header's label, like: 

chart.interactiveLayer.tooltip.headerFormatter(d => {
      if (typeof d === 'string') return d
    })

Upvotes: 1

Related Questions