charts now look much sharper

To get everything looks sharper, move the main container 0.5 pixels in each direction. It's a known issue on D3 (check http://mbostock.github.io/d3/tutorial/bar-2.html). Half-pixel offsets disable anti-aliasing. Additionally, some values gets rounded and some elements get sharpened by CSS. Know bugs: - grid-lines sometimes have an offset of 1px - does not work after windows.resize

charts now look much sharper
009d4c76 · Peter Göbel · 887bc4cf · 009d4c76 · 009d4c76 · 009d4c76
Commit 009d4c76 authored May 02, 2014 by Peter Göbel
Expand all Show whitespace changes
Inline Side-by-side

Showing with 8 additions and 0 deletions

c3.css c3.css +8 -0

c3.js c3.js +0 -0

c3.min.js c3.min.js +0 -0

No files found.
--- a/c3.css
+++ b/c3.css
@@ -13,6 +13,14 @@
          user-select: none;
 }

+.c3-legend-item-tile,
+.c3-xgrid-focus,
+.c3-ygrid,
+.c3-event-rect,
+.c3-bars path {
+  shape-rendering: crispEdges;
+}
+
 .c3-chart-arc path {
  stroke: #fff;


--- a/c3.js
+++ b/c3.js
--- a/c3.min.js
+++ b/c3.min.js