CODEWITHSUNDEEP
javascriptreactjssvgd3.js
texas697
texas697

Reputation: 6397

How to customize D3 Chart labels

I have a custom chart I am trying to put together. The chart will be responsive and it is required to look like the following.

REQUIRED CHART

I am unsure of how to do the outer grey ticks. The working code I have does not display correctly.

Also any tips on the labels would e great.

Currently it looks like this. enter image description here WORKING DEMO

Upvotes: 0

Views: 178

Answers (1)

mgraham
mgraham

Reputation: 6207

Not a React user, and never heard of PieHooks etc but thanks to your working demo I could fiddle about and see that the tick values aren't set at absolute values around the circle but offset to the last tick - like the 'data' in fact.

e.g. This gives 36 evenly spaced ticks (though why they start slightly off-vertical I don't know):

  for (let i = 0; i < 36; i += 1) {
      dataTicks.push({value: 1});
  }

Hope that's some help

Upvotes: 1

Related Questions