Search code examples
d3.jsdimple.js

Remove tick marks in d3 / dimple

How can I remove the tick marks without removing the associated label? I want to keep the labels ("banana", etc), but not the highlighted ticks.

Here is a similar fiddle.

Tick Marks

var svg = dimple.newSvg("#chartContainer", 1000, 1000);
var data = [
      { "date" : '2016-01-01', "project" : "Grape", "status" : 1 },
      { "date" : '2016-01-08', "project" : "Grape", "status" : -2 },
      { "date" : '2016-01-07', "project" : "Apple", "status" : 3 },
      { "date" : '2016-01-08', "project" : "Apple", "status" : 1 },
      { "date" : '2016-01-02', "project" : "Banana", "status" : -2 },
      { "date" : '2016-01-15', "project" : "Banana", "status" : 2 },
    ];
var chart = new dimple.chart(svg,data);
chart.setBounds(100, 100, 500, 300);
var x = chart.addCategoryAxis("x", "project");
var y = chart.addTimeAxis("y", "date", "%Y-%m-%d", "%Y-%m-%d");

y.addOrderRule("date");

var lines = chart.addSeries(["project"], dimple.plot.line, [x, y]);

lines.data = data;
lines.lineWeight = 5;
lines.lineMarkers = true;

chart.draw();
Solution

  • I would just do this in the CSS:

    .tick line{
  visibility:hidden;
}

    Basically all the lines inside the tick can be hidden.

    If you just wanted the x axis ticks to be hidden, I would give that axis an ID rather than a class which you have now, and in you css have something like so (this is if you give it an ID of xAxis) :

    #xAxis.tick line{
      visibility:hidden;
    }

    Updated fiddle : http://jsfiddle.net/thatoneguy/1hotquwf/10/