RadarChart long labels on x axis.

[kagankorkmaz]

When the labels of x-axis are too long in the radar chart the labels do not fin the area(using flex) even if I use like:

              xaxis: {
                    categories: [ ['Functional Application','Functional Application' ], 'Programming with jaspdıfsıodyfvaxxxx', 'C++', 'Parallel Programming', 'Marketing Strategies', 'Fronted Design'],
                    labels: {
                        show: true,
                        trim: true,
                        hideOverlappingLabels: true,
                    }, 
                    tooltip: {
                        enabled: true
                    }
                }

also when the labels are too long ı want to put '...' and show them in a tooltip. Moreover, the tooltip also not working.

[acarmurat]

@kagankorkmaz you need to add

        markers: {
          size: 3,
          hover: {
            size: 10
          }
        }

into chart options for the tooltip, It worked for me.
Also, you can use formatter for xaxis

        xaxis: {
          labels: {
            style: {
              fontSize: "13px"
            },
            formatter:(value)=>{
              var len = value.length
              return len > 25 ? (value.substring(0,22) +"..."): value  
            }
          }
        }

[junedchhipa]

In addition to the suggestion provided by @acar-murat, I have fixed the size of the radar chart which previously didn't take into consideration the width of the x-axis label. It will be released on npm soon.

[kagankorkmaz]

Thank you so much for both of you, in the documentation it says there are no tooltip for xaxis labels for radarChart. Is it possible to add that?

[junedchhipa]

@kagankorkmaz Sorry, x-axis tooltip for radar chart isn't possible. The only tooltip you get in a radar chart is the tooltip as shown below

[kozlovivano]

Hey guys, I tried to display xaxis label for radar chart, but it was not showing

.
The chart option is
xaxis: { categories: ["Sweet Potato Starch", "Brown Sugar", "Clove Honey", "Fructose", "Four Season Green", "Sealing Film (rolls)", "Dixie", "Thermal Paper", "Ceylon Black Tea", "Boba"], labels: { style: { fontSize: "11px" }, formatter:(value)=>{ var len = value.length return len > 15 ? (value.substring(0,12) +"..."): value } }, tooltip: { enabled: true } }

I am using ng-apexchart version 1.2.1. Is this the version problem or something?

[junedchhipa]

@laguna1013 Which version of apexcharts are you using? The latest version, as of now, is 3.22.2

[junedchhipa]

The x-axis labels display fine when your code is used

xaxis: {
  categories: [
    'Sweet Potato Starch',
    'Brown Sugar',
    'Clove Honey',
    'Fructose',
    'Four Season Green',
    'Sealing Film (rolls)',
    'Dixie',
    'Thermal Paper',
    'Ceylon Black Tea',
    'Boba'
  ],
  labels: {
    formatter: (value) => {
      var len = value.length
      return len > 15 ? value.substring(0, 12) + '...' : value
    }
  }
}

[kozlovivano]

@junedchhipa, thank you for the reply and interest about my issue.

I have updated some dependencies.

"apexcharts": "~3.22.1",
"ng-apexcharts": "1.5.6",

But the problem is still remaining. The code environment is on production and hard to share.
Some of them is as below.
const inventoryCurrentChart: ChartType = { series: [ ], chart: { height: 320, type: "radar", toolbar: { show: false } }, tooltip: { theme: 'dark', followCursor: true, y: { formatter(y) { return '$' + (Math.floor(y * 100) / 100).toString() } } }, legend: { show: true, }, title: { text: "Current inventory stock" }, xaxis: { categories: [ ], labels: { show: true } } };
And, the function that seeds the array is
`private render_current_chart = () => {
this.currentTotalValue = 0
this.inventory_current_chart.series = []
this.inventory_current_chart.xaxis.categories = []
let data = {
name: 'Item value',
data: []
}
let uniq_items = []

this.inventory_history.forEach(item => {
  if(uniq_items.indexOf(item.inventory_id) == -1){
    uniq_items.push(item.inventory_id)
    data.data.push(0)
    this.inventory_current_chart.xaxis.categories.push(item.vendor_description)
  }
})
this.inventory_history.forEach(item => {
  if((item.counter_name != null) && (item.timestamp.split('-')[0] == moment().format('YYYY')) && (item.timestamp.split('-')[1] == (this.MONTHS.indexOf(moment().format('MMMM')) + 1))){
    data.data[uniq_items.indexOf(item.inventory_id)] = item.value ? parseFloat(item.value) : 0
  }
})
data.data.forEach(item => {
  this.currentTotalValue += parseFloat(item)
})
this.inventory_current_chart.series.push(data)

}`
ps. I am using Angular version 8 for this project. (Might be the reason of this issue?)

[pepaulo8]

@kagankorkmaz Sorry, x-axis tooltip for radar chart isn't possible. The only tooltip you get in a radar chart is the tooltip as shown below

There is a workaround to show big names in x-axis. Using the solution provided by @acarmurat above, you can add the following code to the tooltip property which is in the same "level" of xaxis. See:

            tooltip: {
                enabled: true,
                x: {
                    formatter: (value: any) => value
                }
            },
            xaxis: {
                categories: [
                    'Capacity of working hard through difficults',
                    'Hability to name functions with clarity and effort',
                    'Empathy',
                    'Hard work'
                ],
                labels: {
                    style: {
                        fontSize: '16px'
                    },
                    formatter: (value: any) => {
                        const len = value.length;
                        return len > 10 ? `${value.substring(0, 12)}...` : value;
                    }
                }
            }

The result: