CODEWITHSUNDEEP
d3.jschartsc3.js
user3006967
user3006967

Reputation: 3545

how to change C3JS vertical tooltip line color and hide y axies line

I have two questions regarding c3js, can you help to tell me solutions:

  1. For customer tooltip, there is a light gray vertical line moving with the mouse, we require some special colors for the vertical line instead of the light gray. As the line goes away when mouse is out of the chart, I can not debug the class name of the line, can anyone tell me what class name I can use to change the vertical line color?

  2. We have requirement to remove the vertical y axis line and the small horizontal line for each tick. Can anyone also suggest solution for this?

Thanks

Upvotes: 1

Views: 874

Answers (1)

i alarmed alien
i alarmed alien

Reputation: 9530

Q1. You can change the line colour by setting the stroke on .c3-xgrid-focus line in your stylesheet or style declaration.

.c3-xgrid-focus line {
  stroke: rebeccapurple;
}

Q2. You can hide the y axis by setting axis.y.show to false:

axis: {
  y: {
    show: false;
  }
}

If you still want the tick text, you can hide the lines with css:

.c3-axis.c3-axis-y path, .c3-axis.c3-axis-y line {
  stroke-opacity: 0
}

Upvotes: 2

Related Questions