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.
Related
I have a chart with proper display of data, but my Y-Axis is linear (should be) and it crops data (see screenshot).
I expect Y-Axis to show linear data AND respect the edge (max) value of the chart.
I was trying to work with d3-scale but I failed - don't know how to "append" max value to the scale. The only way I figured is to manually calculate all the ticks which I'd like to avoid.
My Y-Axis code is
<YAxis
domain={[data.yAxis.min, data.yAxis.max]}
scale="linear"
tickFormatter={formatEnergyAxis}
/>
Where min is 0 and max is 3200 (unit conversion happens in formatters).
Is there a way to adjust the scale?
If possible, call the function .nice() inside YAxis. Otherwise, call it before passing the values to the binding:
d3.scaleLinear().domain([0, 3200]).nice().domain()
// [0, 3500]
That would be
<YAxis
domain={d3.domain([data.yAxis.min, data.yAxis.max]).nice().domain()}
scale="linear"
tickFormatter={formatEnergyAxis}
/>
On your Y-Axis, you can specify your last tick to be visible with the props interval set to preserveEnd, like this:
<YAxis
domain={[data.yAxis.min, data.yAxis.max]}
scale="linear"
tickFormatter={formatEnergyAxis}
interval="preserveEnd"
/>
You can also use the value preserveStartEnd to be have the root & edge values visible.
like explained here: enter link description here I've added the zoom behavior to my chart.
D3 start the ZoomTransform to K=1, X=0, Y=0.
Is it possible to override those K, X, Y? For example says that the current state of chart (with its axis and scale) is not K=1,x=0,y=0, but it's something like k=0.012, x= 12, y= -18 ?
You can set the transform attribute of the SVG element in question as follows:
svg.attr('transform', 'translate(12, -18) scale(0.012)');
This could be either on initialisation of the visualisation, or in the handler for an event such as the click of a reset button.
It's important to note that this is how the zoom effect is being applied in your example. The result of d3.event.transform.toString() would be something like:
translate(100, 100) scale(2)
and the result of d3.zoomIdentity.toString() is:
translate(0, 0) scale(1)
In other words, you get a correctly formatted argument for an SVG element's transform attribute, which when applied using:
mySvgElement.attr('transform', d3.event.transform);
zooms, or pans the element.
I'd like to add a unit to the y-axis tick labels in plotly.js. How might I do this? Adding a ticktext and tickval property for yaxis layout doesn't seem to have the effect I thought, as it does with an xaxis.
As per your own comment, and per here
ticksuffix(string)
You can add this as part of the x or y axis option as part of the layout text for your plot.
e.g.
var layout = {
yaxis:
{
ticksuffix: "suffix"
}
};
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.
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