Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Styling labels

See original GitHub issue

Hey, this is more of a question than an issue. I have a bar chart with distributeSeries: true, a lot of bars and rather wordy labels that overlap: labels-straight You can see the problem 😃 So, I have tried rotating the labels: labels-rotated Using this pattern I’d ideally want to force the labels to be one-line only and align perfectly with the bar. How can I achieve that? I’m also open for different ideas about positioning the labels.

Thank you very much, for this module and your help.

Issue Analytics

State:
Created 8 years ago
Comments:6

Top GitHub Comments

5reactions

klaemocommented, Jul 15, 2015

Solved it! Here’s the code

chart.on('draw', (ctx) => {
      if (ctx.type === 'label') {
        // adjust label position for rotation
        const dX = ctx.width / 2 + (100 - ctx.width)
        ctx.element.attr({ x: ctx.element.attr('x') - dX })
      }
})

and

.ct-chart-bar .ct-label.ct-horizontal.ct-end {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: rotate(-30deg);
  transform-origin: 100% 0;
  text-align: right;
  max-height: 1.5em;
  min-width: 100px;
  max-width: 100px;
}

4reactions

fdemmercommented, Jun 8, 2017

@eriknl1982 add axisX: {offset: ...} to add space for labels