[Chartjs]-How to put an image a circle chart

by

1👍

If you take a look at the Chart.js documentation for doughnut charts, you’ll notice there’s nothing in there about background images. Background color is the best you get. That’s likely because drawing actual photos on a canvas can be a pretty complicated task that is often not especially performant, so they don’t include it out of the box.

So that being the case, whether you can still pull this off depends on exactly what you had in mind.

If you want to have different images for each different value on the doughnut, that’s not going to happen, at least not while using Chart.js. (You could probably do that if you did the whole chart is pure CSS, though.)

If you just want a single image in the middle of the doughnut, though, what you could do is add an img tag or use a CSS background-image for some element and position that image/element on top of your chart. Since the canvas has to be given a static size anyway, this may work out alright for you; you may just need to experiment a bit to get the position and size just right.

In the snippet below, I’ve added a wrapper around the canvas and put the background image on a pseudo element of that wrapper (since you can’t have pseudo content on the canvas itself). I’ve positioned the pseudo element to go in the middle of the doughnut.

var htmlDoughnut = document.getElementById("html").getContext("2d");
var htmlData = [
  {
    value: 90,
    color:"#74cfae"
  },
  {
    value : 10,
    color : "#f2f2f2"
  }
];
var myHTMLdoughnut = new Chart(htmlDoughnut).Doughnut(htmlData, {
  percentageInnerCutout : 80
});
#canvas-wrapper {
  position: relative;
}
#canvas-wrapper::after {
  content: '';
  display: block;
  position: absolute;
  top: 19px;
  left: 19px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background-image: url('https://picsum.photos/id/1042/300/450');
  background-size: 140px auto;
  background-position: center center;
  background-repeat: no-repeat;
}
<div id="skills">
  <div class="container">
    <div class="row center-block">
      <h3 class="text-center">Dev Skills</h3>
      
      <div class= html5>
      <div class="col-xs-6 col-sm-3 col-sm-offset-1">
        <div id="canvas-wrapper">
          <canvas id="html" height="150" width="150" ></canvas>
        </div>
        <p>HTML5</p>
        <br>
      </div>
      </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js'></script>

Leave a comment