Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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();
like image 924
Alice Avatar asked Apr 15 '16 08:04

Alice


1 Answers

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/

like image 164
thatOneGuy Avatar answered Sep 28 '22 06:09

thatOneGuy