CODEWITHSUNDEEP
javascripthtmlcsschartist.js
TobiasW
TobiasW

Reputation: 891

Add one centered label to a donut chartist-js

Since I could not find and answer for this question, I hope it's not a duplicate. I'm using chartist.js, and I make a simple donut, that's pretty easy and straight forward, but now I'd like to disable the labels, which works fine and add a single lable inside of the donut (Thhis is the problem). It's not needed, that the label gets greated, by the chart itself, it would be sufficient if it's just a new div or something else.

My Code so far: 

<div class="ct-chart1 ct-chart ct-perfect-fourth"></div>

and 

new Chartist.Pie('.ct-chart1', {
    labels: [],
    series: [75, 25]
}, {
    donut: true,
    width: '300px',
    height: '200px',
    donutWidth: 30,
    startAngle: 0,
    total: 100
});

I already tried to make the chart itself a flexbox and add the label as child and center it that way, but that did not work and I tried to surround the chart with a new div, but that let's the chart disappear.

<div>
    <div class="ct-chart1 ct-chart ct-perfect-fourth"></div>
</div>

Upvotes: 0

Views: 999

Answers (1)

gkunz
gkunz

Reputation: 1423

I'd use the draw event to center labels to the middle of the chart. Check this bin http://jsbin.com/hipafu/edit?html,css,js,output

Also watch out for the styles:

.ct-label {
  dominant-baseline: central;
  text-anchor: middle;
}

Upvotes: 2

Related Questions