Dc.js line chart yAxis ticks

Question

I am creating a line chart with dc.js. The line chart can successfully render but the y axis is overlapped. I want to reduce the tick number on the y axis value with yAxis().ticks() but failed. Can somebody help me with this issue? Thanks a lot.

var DateD = ndx.dimension(function(d){return d.parsedDate});
var DateGroup = DateD.group().reduceCount();

var DatelineCharts = dc.lineChart("#chart-line")
    .width(1000).height(100)
    .dimension(DateD)
    .group(DateGroup)
    .x(d3.time.scale().domain([minDate,maxDate]))
    .elasticX(true)
    .elasticY(true)
    .xAxis().ticks(15);

    DatelineCharts.yAxis().ticks(15);

This could serve as a helpful resource: groups.google.com/forum/#!topic/dc-js-user-group/o-icbJCZSMg — Ben Leitner
As the link points out, .ticks() is only a hint. Try an even lower number if you can't hard code the tick values. — Gordon
This might be out of date but in case of use to anyone using the above code: the variable name appears to be wrong. DatelineChart vs. DatelineCharts. — emma

Daya Paari Daya Paari · Accepted Answer · 2018-11-06T21:01:15

Always give xAxis and yAxis ticks separately from the Charts Definitions. Try the code below:

var DatelineCharts = dc.lineChart("#chart-line")
  .width(1000).height(100)
  .dimension(DateD)
  .group(DateGroup)
  .x(d3.time.scale().domain([minDate,maxDate]))
  .elasticX(true)
  .elasticY(true);
  //.xAxis().ticks(15);

DatelineCharts.xAxis().ticks(15);
DatelineCharts.yAxis().ticks(10);

Dc.js line chart yAxis ticks

1 Answers