search

c3js / c3

:bar_chart: A D3-based reusable chart library
http://c3js.org
MIT License
9.35k stars 1.39k forks source link

x axis ticks text overlapping #2677

Closed sheshnathverma closed 5 years ago

sheshnathverma commented 5 years ago

I'm using c3js for stack chart and I have also configure multiline but if words are long then its overlapping to others x axis ticks label.

axis: { x: { tick: { type: 'category', culling: false, fit: true, multiline: true, multilineMax: 2
} }

I have tried to add padding, margin but its does not work because ticks are svg tspan element.

image

Venefilyn commented 5 years ago

Hi,

I've gotten around this by rotating the ticks:

axis: {
  x: {
    type: 'category',
    categories: this.chartingData.categories,
    tick: {
      rotate: 60,
      multiline: false,
      fit: true
    }
  }
},
panthony commented 5 years ago

Closing this issue as duplicate of #1078