CODEWITHSUNDEEP
phpfusioncharts
jayant kumar
jayant kumar

Reputation: 333

X-axis labels not showing on chart render in FusionChart

X axis labels are not showing by default when chart renders. On clicking of legend (Say T2), it shows. See below pics for details.

Pic 1:

Pic 2:

Pic 1: Labels not showing. Pic 2: On clicking of legend (T2), labels appear

Can someone tell what is the issue here. I do not see any error in console of chart debugger

Upvotes: 0

Views: 449

Answers (2)

Aman Saraswat
Aman Saraswat

Reputation: 172

In this mode, you can wrap long x-axis labels into multiple lines. If enough space is not available in a chart, this mode will automatically trim labels, add ellipses at the end, and show tooltips for such labels. To wrap the data labels, set the labelDisplay attribute as wrap. Refer to the code below:

{
   "chart": {
      "rotateLabels": "0",
      "labelDisplay": "wrap"
   }
}

Here is the live demo code -

FusionCharts.ready(function() {
  var revenueChart = new FusionCharts({
    type: 'mscolumn2d',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "theme": "fusion",
        "caption": "Sales Trends",
        "subcaption": "2016 - 2017",
        "xaxisname": "Month",
        "yaxisname": "Revenue",
        "numberprefix": "$",
        "labelDisplay": "wrap"
      },
      "categories": [{
        "category": [{
            "label": "12-Jan-2016"
          },
          {
            "label": "02-Feb-2016"
          },
          {
            "label": "15-Mar-2016"
          },
          {
            "label": "10-Apr-2016"
          },
          {
            "label": "22-May-2016"
          },
          {
            "label": "11-Jun-2016"
          },
          {
            "label": "21-Jul-2016"
          },
          {
            "label": "02-Aug-2016"
          },
          {
            "label": "12-Sep-2016"
          },
          {
            "label": "18-Oct-2016"
          },
          {
            "label": "14-Nov-2016"
          },
          {
            "label": "28-Dec-2016"
          },
          {
            "label": "21-Jan-2017"
          },
          {
            "label": "11-Feb-2017"
          },
          {
            "label": "06-Mar-2017"
          },
          {
            "label": "14-Apr-2017"
          },
          {
            "label": "11-May-2017"
          },
          {
            "label": "28-Jun-2017"
          },
          {
            "label": "30-Jul-2017"
          },
          {
            "label": "19-Aug-2017"
          },
          {
            "label": "23-Sep-2017"
          },
          {
            "label": "22-Oct-2017"
          },
          {
            "label": "19-Nov-2017"
          },
          {
            "label": "22-Dec-2017"
          }
        ]
      }],
      "dataset": [{
        "data": [{
            "value": "27400"
          },
          {
            "value": "29800"
          },
          {
            "value": "25800"
          },
          {
            "value": "26800"
          },
          {
            "value": "29600"
          },
          {
            "value": "32600"
          },
          {
            "value": "31800"
          },
          {
            "value": "36700"
          },
          {
            "value": "29700"
          },
          {
            "value": "31900"
          },
          {
            "value": "34800"
          },
          {
            "value": "24800"
          },
          {
            "value": "26300"
          },
          {
            "value": "31800"
          },
          {
            "value": "30900"
          },
          {
            "value": "33000"
          },
          {
            "value": "36200"
          },
          {
            "value": "32100"
          },
          {
            "value": "37500"
          },
          {
            "value": "38500"
          },
          {
            "value": "35400"
          },
          {
            "value": "38200"
          },
          {
            "value": "33300"
          },
          {
            "value": "38300"
          }
        ]
      }]
    }
  });

  revenueChart.render();
});

Here is the demo fiddle - https://jsfiddle.net/h9s4p7cu/2/

Refer the docs - https://www.fusioncharts.com/dev/chart-guide/chart-configurations/data-labels

Upvotes: 0

Srishti Jaiswal
Srishti Jaiswal

Reputation: 61

Tried replicating the problem and the X-axis labels are rendered correctly after rotating in this sample: http://jsfiddle.net/xykvfru8/

"labelDisplay": "rotate"

Would you please replicate your issue in the above sample and share?

Upvotes: 0

Related Questions