Im having an highStock chart that is not displaying the last yAxis horizontal line value.
Let's take a look on the picture as it shows the problem: It shows 299, 400, 600 but the last one is not displayed
http://s10.postimg.org/rlp7via7t/highstock.png
You should set showLastLabel as true http://api.highcharts.com/highstock#yAxis.showLastLabel
Related
I have been going through some code and I encountered .tickSize(10,1) and .tickSize(10, 0) I know the first argument fixes the tickSize. Can anybody explain what the second argument do?
It sets the size of the first and last ticks on the axis. You can play with it here to see what changing the second parameter does but here are some screenshots to demonstrate it:
var axis = d3.svg.axis()
.scale(scale)
.orient("right")
.ticks(10)
.tickSize(10,1) // <-------------- Set outer tick size to 1
.tickFormat(formatPercent);
Rendered Axis:
Changing the code to .tickSize(10,50) results in an axis that looks like the following (notice the size of the first and last 'outer' ticks):
I am trying to do a barchart with Recharts but ticks on both axis are getting out of svg:
Do you know to solve this ?
In your example, your tick labels have an angle that puts them out of the svg zone. To turn back your tick labels like on a line, you need to either update the angle prop to 0, like the following:
<XAxis dataKey="name" angle={0} />
Removing the angle prop from the XAxis would work as well, since its default value is 0.
I have a CanvasJS stacked area chart which is ignoring my attempts to change the x axis labels font size and color. I use this code:
axisX: {
gridThickness: 0,
interval: 5,
lineThickness: 1,
labelFontColor: "#000000",
labelFontSize:12
but my axis labels remain unchanged from the default size and color:
is there anything special required for stacked area charts?
Thanks in advance.
Issue was that the axis format property was not inside the x axis jason node, so user error! Thanks for the reply Indranil.
Is there a way to select all of the tick mark lines and make them dashed? I tried selecting all lines, but that only got me halfway there. Here's my code so far:
http://jsbin.com/zosihajari/edit?js,output
What I would do is to get hold of the vertical lines, make them grey and dashed but also if possible offset them a little off the axis line so they don't start/end at the bottom/top of the svg space. Is there a way to do that?
Set the outerTickSize to zero:
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.outerTickSize(0)
.innerTickSize(-(height-20));
Here is your JSBin: http://jsbin.com/jepudifowu/1/edit?css,js,output
I am using D3.js to draw an axis with ticks. I would like to hide only the last tick on the y-axis.
Maybe a picture will make it clearer. This is what my axis looks like at the moment - I'd like to hide the "21" and its associated tick.
Here is my current code:
var yAxisScale = d3.svg.axis().orient("left");
yAxisScale.scale(y_position);
yAxisScale.ticks(20).tickFormat(function(d) { return d+1; });
var yAxis = vis.selectAll("g.y.axis").data([1]);
Is there a way I can hide only the last tick, regardless of how many ticks there are on the y-axis?
I tried adding this line, but it doesn't work, even though the selectAll expression appears to return the right element.
d3.select(d3.selectAll("g.y.axis g")[0].pop()).style('opacity', 1e-6);
The opacity is still set to 1.
you should to take a look at axis.tickSize(). it allows you to set the size of the major, minor, and end ticks.
also see here for similar question:
Remove end-ticks from D3.js axis