I am trying to add graph lines (horizontal and vertical) to a area chart.
I would like my graph
enter image description here
to look like this
enter image description here
I have attempted to follow this example https://github.com/d3/d3-axis but it only adds the dotted lines too the left of the axis and I cannot understand why
I have created a stack blitz for anyone who cares to help:
https://stackblitz.com/edit/angular-ivy-dbhrnm?file=src%2Fapp%2FstackedArea-chart-visualization%2FstackedArea-chart-visualization.component.ts,src%2Fapp%2FstackedArea-chart-visualization%2FstackedArea-chart-visualization.component.html
The best I found was to increase the ticksize to make them grids. So for example on your X Axis you can do something like this
.call(d3.axisBottom(x)
.tickSize(-height)
Related
link : D3 Charting Tool: How to add label at right of target line (additional horizontal line) in column chart
I implemented the graph through this link.
The problem is that if there are multiple graphs and the y-axis values are different at the same height, if the horizon value is 10px, then 10px is output regardless of the y-axis range.
If i want to add horizontal lines according to the y-axis range, I'd like to know a solution.
Is it possible to change x-axis label orientation like marked area on the screenshot? I was trying rotate labels with afterCalculateTickRotation but they weren't flipped. Mirror option doesn't work also.
Example code
I managed to do what you are asking for but it's not beautiful because chart.js lacks support to do it properly. So I solved it with some hard coded padding.
https://codesandbox.io/s/vue-template-4ygr1
It's the minRotation and maxRotation you should work with. The labels anchoring point should shift when the rotation goes below zero but they don't. Instead they rotate into the chart but this can be avoided with padding.
A side effect of the padding is that the legend placement broke so i put it in the top instead.
Another unwanted behavior is that the text is aligned to the right. There is an open issue about that: https://github.com/chartjs/Chart.js/issues/4193
I am using iOS Charts by Daniel Gindi.
I need to draw horizontal stacked area chart (Example). But I cannot find similar charts in examples of the library. I am trying to customise Horizontal Bar Chart like in example. But I cannot to avoid square corners.
How can I draw line instead of bars with squared corners?
Is it possible in this library or I should use another one?
Yes you can.
Use line chart instead ,and set drawFilledEnabled to true.
But the filled area is between line and x axis, so you may need to rotate the chart.
I have an XY graph with a legend that automatically resizes to fit the contents of the legend. The problem is that sometimes the legend text is such that the resizing overlaps the plot, see the image below. Is there a way to keep the legend from resizing over the plot data? In other words to confine the resizing operation to outside of the plot box?
Update: it would seem that part of the problem is the auto expand ability of the legend always expands to the left-hand side. Placing the legend on the left-hand side of the plot keeps the legend from covering the graph.
1:
You probably have moved the legend, changing it's anchor point. You can move the legend to the right side of the graph element and it should re-anchor.
In Qlikview 11 I managed to set up (amongst others) a nice scatter chart without any major problems. Now I would like to be able to zoom into a region in that chart. Intuitively this could be accomplished by selecting a rectangular region with the mouse. Incidentally this works fine in "regular" line or bar charts. The new x and y axis regions correspond to the selected rectangle. However this does not happen with my scatter chart. I suspect this has something to do with the way dimensions are handled in scatter charts. For easier understanding I appended to screen-shots of the status quo - or how I don't want it to be.
Full chart with selected region http://img801.imageshack.us/img801/4873/6ccc.png
Chart displaying only the selected data http://imageshack.us/a/img138/9053/kck5.png
From what it looks like, I would guess that the scatter plot has hard coded axis max and mins. Check the "Axes" tab under chart properties, and uncheck the scale boxes. That should allow the chart to zoom in.