The text isn’t clean/sharp!

Hello,

I believe there is some issue with the text in my charts.

Ideally, a chart should look this way

screen_shot_2016-06-20_at_7 12 23_pm

But, in my case, the text seems to be blurry and too smooth. It doesn’t look sharp/clean at all.

screen shot 2016-06-21 at 2 45 41 am

Following are the options I am using:

options: {
  animation: {
    duration: 5000,
    easing: "easeOutBounce"
  },
  tooltips: {
    mode: "label"
  },
  bar: {
    stacked: true
  },
  scales: {
    xAxes: [{
      gridLines: {
        display: false
      },
      ticks: {
        beginAtZero: true
      }
    }],
    yAxes: [{
      gridLines: {
        display: false
      },
      ticks: {
        beginAtZero: true,
        max: {!! ($individualStatsMax+1) !!},
      }
    }]
  },
  legend: {
    labels: {
      boxWidth: 10,
      fontSize: 14
    }
  }
}

Now, I understand the first image isn’t ChartJs, so the font family can be different, but why is the text not sharp at all? Is this happening because of the theme I am using? If yes, what really can it be? Is there a way to fix this from ChartJs only?? If no, what else can be causing this?

Thanks,

Author: Fantashit

3 thoughts on “The text isn’t clean/sharp!

  1. I faced this today on Chrome latest version, literally wasted 3 hours to chase it.
    Finally it turned out that issue only occurs only when browser zoom is reduced less than 100%%, resetting window zoom to 100%% resolved the issue.

    Hope this info helps the developers to reproduce and fix the bug!!!

  2. Make sure that you don’t adding some css to the canvas element.
    In my case I found that I am adding border property to the canvas element what was causing the problem of blur on text and bars.

    dont use something like that :

    `canvas { border: 1px solid #000 }`
    

    or with id or class like that :

    `#myChart { border: 1px solid #000 }`
    `.myChart { border: 1px solid #000 }`
    

Comments are closed.