I'm in process of creation of the nvd3 line chart with "step-after" interpolation. I need to have these horizontal pieces to be the same size visually even in case if X axis values are very different (e.g. [0, 90, 100])
Here is something that I expect: http://i.stack.imgur.com/MjvDl.png
Thanks.
You should use the interpolate attribute of your chart.
chart = nv.models.lineChart()
.margin({top: 50, right: 60, bottom: 30, left: 70})
.interpolate("step-after")
Related
I have to create a custom stock chart with variable width x axis for each date.
I am using d3.scaleOrdinal for creating the x-axis
const xScale = d3.scaleOrdinal()
.domain(["16-09-2022", "17-09-2022", "18-09-2022", "19-09-2022", "20-09-2022"])
.range([0, 260, 500, 750, 900,1010]);
While zooming using geometric approach, the axis got scaled as a whole(i.e ticks, ticklabel, axis line) which I want to work like scaleLinear.
svg.select("#xaxis")
.attr("transform", `translate(${transform.x},${margin.top})scale(${transform.k}) `)
Can anybody suggest how to achieve the desired result with d3 v7
Thanks in advance
You need to use a continuous scale, like scaleLinear, otherwise it won't work because the ordinal scale cannot interpolate between values.
Think of it like having an array with indexes 0, 1, 2. There is no index 0.5 or 1.5, because ordinals are discrete whole values.
Intially I have the decreasing line plot but when I do cross filtering it won't be decreasing any more as the x-axis labels become fixed. I want this X-axis labels to be dynamic and to be arranged on the basis of the y-axis values. I ain't able to find the syntax or what to be used for this case.
I initialize my chart like
lineChart2
.height(600)
.width(lineChart2.width()*0.95) //give it a width
// .margins({top: 10, right: 10, bottom: 20, left: 100})//give it margin left of 100 so that the y axis ticks dont cut off
.dimension(lineTypeDimension)
.group(lineTypeGroup)
.ordering(function(kv) {
console.log("val:",kv.value);
return -kv.value; })
.x(d3.scaleOrdinal( ))
.xUnits(dc.units.ordinal)
.interpolate('linear')
.elasticY(true)
.renderArea(true)
.renderlet(function(chart){chart.selectAll("circle.dot").style("fill-opacity", 1).on('mousemove', null).on('mouseout', null);})
// .renderTitle(true)
.renderLabel(true)
.xAxis().ticks(3).tickFormat(function(d) {
return d;
});
Here is the working demo:
https://blockbuilder.org/ninjakx/302eaacb0a333e67c46c55dd60d27811
You can get the line chart to recalculate the X domain on each redraw by setting
lineChart2
.elasticX(true)
The feature was originally intended for linear scales in order to calculate the min and max each redraw. Ordinal scales work differently, with a sequence of domain and range values, but setting elasticX will will get the chart to recalculate the scale.
As you can see here in the screenshoot, at the bottom center(x axis), the label Quiz/Exam is cropped.
I increased the height for the Line Chart, but it does only increase the graph size.
I came across the same problem and fixed it by adding a margin to the chart, eg;
<LineChart
<LineChart
margin={{
top: 0,
right: 0,
left: 0,
bottom: 15
}}
...
>
I'm using Rickshaw graphs and I have a line graph working just fine. However, I would like to make the plot points visible by increasing their size. Is there a way to do this?
Here is my code:
var graph = new Rickshaw.Graph({
element: document.querySelector("#chart"),
width: window.innerWidth - 180,
height: 300,
renderer: 'line',
interpolation: 'linear',
min: 0,
max: 100,
series: graphLines
});
I tried using graph.renderer.dotSize = 16;, but it doesn't seem to work on line graphs, only scatter plots.
One thing I've done in the past is use the 'multi' option and create one line graph with a scatter plot on top of it to simulate the lines
I need Y axis ticks format in multiples of 500's
What I have is
http://i60.tinypic.com/104500w.jpg
What I need is
http://i58.tinypic.com/bfhod5.jpg
Solved.
I added the below property to the graph:
vAxis:{ticks: [0, 500, 1000, 1500, 2000, 2500, 3000, 3500]}