search

chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag
https://www.chartjs.org/
MIT License
64.33k stars 11.89k forks source link

Some charts drawn with last series legend missing #3198

Closed davidmichaelkarr closed 8 years ago

davidmichaelkarr commented 8 years ago

I have a SPA that draws a bunch of related charts on the page. They all have the same series labels, but some are bar charts, and some are line charts. Recently I've noticed that of the four series labels, it is sometimes failing to render the last series label, even though it renders the data for that series, and there is clearly room for it to draw the last series label, it just doesn't. I can hover the mouse on the chart to verify that there is data for that last series.

Looking at the attached picture, you can see that two of the charts on the bottom row are missing the "OCE" series label. You can also see that data is being rendered for that series, as you can see that series label on other charts, and you can see the bar of the same color on the charts where the series label is missing.

I don't know if it matters if I include any of the rendered data in this issue, but it might be helpful if I include the excerpt of the HTML that is rendering this. I'm using angular and angular-chart with this.

HTML excerpt: `<!DOCTYPE html>

Orders ```

Connection established. Waiting for data ...

SS Fulfillment Real-time DashBoard

Last 30 Minutes
Daily
``` ` ![showingmissingoceserieslabel](https://cloud.githubusercontent.com/assets/5566419/17899925/e6b96e0c-6911-11e6-9e70-e28b4b09809b.png)
etimberg commented 8 years ago

This is interesting. I've never seen the legend drop a label like that. I do see that the left edge is cut off. Maybe that is somehow related as well.

davidmichaelkarr commented 8 years ago

It's possible this particular issue was due to my adding some bad css to support the fieldsets. I removed them, along with the css settings, and that particular problem went away. They were settings on "canvas". This is separate from the left side truncation problem.

If it matters, here's the (commented-out) css that I had been using for the fieldsets: /* canvas { */ /* padding: 0px !important; */ /* margin: 0px !important; */ /* overflow: auto !important; */ /* height: auto !important; */ /* width: auto !important; */ /* } */