CODEWITHSUNDEEP
d3.js
Jeremy
Jeremy

Reputation: 337

xCharts - Rendering of text is blurry

I am testing out xCharts which uses the d3.js library (http://tenxer.github.com/xcharts), however when I attempt to render the chart on my website and on jsfiddle the text is blurry. You can see how it looks different below.

http://jsfiddle.net/JsPxx/

This is the code I am using.

 (function () {

      var data = {
  "xScale": "ordinal",
  "yScale": "linear",
  "main": [
    {
      "className": ".pizza",
      "data": [
        {
          "x": "Pepperoni",
          "y": 4
        },
        {
          "x": "Cheese",
          "y": 8
        }
      ]
    }
  ]
};
      var myChart = new xChart('bar', data, '#myChart');

    }());

Any help on why it does not look the way it should (as on http://tenxer.github.com/xcharts) would be appreciated/

Upvotes: 0

Views: 3075

Answers (2)

Dmitry
Dmitry

Reputation: 731

in xchart.css find .xchart .axis text selector and add stroke-width: 0; rule

Upvotes: 2

meetamit
meetamit

Reputation: 25157

Two issues:

  1. The tick lines of the axis are getting anti-aliased, so they appear as two pixels wide. By adding shape-rendering:crispEdges to the CSS class of the axis – or to the whole chart, if you'd like – you can disable anti-aliasing. You can read more about it in this great tutorial by Scott Murray.

  2. The text seems to have a stroke applied to it (it may be coming from your code or from your css, or from defaults). Giving it CSS stroke: none is one way to take care of it.

Upvotes: 3

Related Questions