CODEWITHSUNDEEP
javascripthighchartshtml-table
acr
acr

Reputation: 1746

Highchart tooltip is not working when using it for date

I am comparring the credit and debit for each month and creating highchart using this data. Here is the code I am using 

<html>
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script> 
      <script src = "https://code.highcharts.com/modules/data.js"></script>

   </head>
      <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>

<table id="datatable"> 
    <thead>
        <tr>
            <th></th>
             <th>Credit</th>
             <th>Debit</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>2018-Feb</th>
            <td>500</td>
            <td>231</td>
        </tr>
    </tbody>
</table>

    </body>   
</html>

JavaScript:

  <script language = "JavaScript">
     $(document).ready(function() {
        var data = {
           table: 'datatable'
        };
        var chart = {
           type: 'column'
        };
        var title = {
           text: 'Credit Debit comparison'   
        };      
        var yAxis = {
           allowDecimals: false,
           title: {
              text: 'Units'
           }
        };
        var tooltip = {

           formatter: function () {

              return '<b>' + this.series.name + '</b><br/>' +
                 this.point.y + ' ' + this.point.name.toLowerCase();
           }
        };
        var credits = {
           enabled: false
        };  
        var json = {};   
        json.chart = chart; 
        json.title = title; 
        json.data = data;
        json.yAxis = yAxis;
        json.credits = credits;  
        json.tooltip = tooltip;  
        $('#container').highcharts(json);
     });
  </script>

tooltip is not working with above code. But As soon I remove numbers from th tag in tbody, it will work without any issues. In above code If I change line <th>2018-Feb</th> to <th>Feb</th> , it will work. How can I use the date format or any numbers also in th field ?

Fiddles: working code - No numbers in tbody th - Click here

Not working code - th changed to 2018-Feb - Click here

Upvotes: 0

Views: 23

Answers (1)

Core972
Core972

Reputation: 4114

You need to specify the xAxis.type (Highcharts Doc) to make it works like that :

        ...
        var xAxis = {
            type:'category'
        }
        ...
        json.xAxis = xAxis;

Fiddle

Upvotes: 1

Related Questions