CODEWITHSUNDEEP
javascriptd3.js
Kunal Vashist
Kunal Vashist

Reputation: 2471

How to show duplicate values in the domain

I am trying to create a bar chart based on the values that are coming, it should show all the label as it is. The bar chart is grouped in nature.

I am able to create most of it, but somehow value labels are not coming properly.

["July 02,2017", "July 09,2017", "July 02,2017", "July 12,2017"]

Currently scale.ordinal is removing the duplicate values and making scale set like:

["July 02,2017", "July 09,2017", "July 12,2017"]

Which is disturbing the chart view.

How can I show duplicate values in x-axis as it is?

JsFiddle

Upvotes: 2

Views: 191

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102188

D3 uses the mathematical concept of domain and image for the domain and range of the scales. Therefore, domain values should be unique.

A workaround in your case is creating another property in your data array, like this, which uses the index of each object to create a property conveniently named index:

data.forEach(function(d, i) {
    d.index = i
})

Then, use that property (which has unique values) for the domain of your x scale.

Also, you'll have to change the ticks for the x scale, which you can do with tickFormat:

.tickFormat(function(d, i) {
    return data[i].Groups
});

Here is the updated fiddle: http://jsfiddle.net/wujtnomh/

Upvotes: 4

Related Questions