How do I stop graphs appearing cropped when using D3 splines? - javascript

Our UI uses D3 and when applying splines to smooth the data we have several cropping or out of bounds issues as follows:
Spline is cropped at top of graph
Spline goes below x-axis
Any advice would be appreciated.

Use .getBoundingClientRect() on each of the set of paths to get the extreme top and bottom bounds, then adjust the axis range or the visible margins of the chart accordingly

Related

Chartjs not zooming out on x-axis

I have used the zoom plugin for zooming my chart and it was quite useful but I am getting some really difficulty in zooming out. On my x-axis there are dates and I am zooming only the x-axis. If I zoom in and then zoom out it is not doing and showing the chart back to its position however if I simply plot the counting numbers along side the x-axis it zoom out successfully. I have searched but nothing helps in this regard.
Another suggestion I want is can I have a scroll depend on the zoom? like on x-axis when I zoom in graph go out of the canvas total width and we cannot see the future points. So can I have the scroll that increase the scroll as the zoom and we can scroll the graph? Or another suggestion is may be we can have a drag option like drag the chart to the position like we move and pull the chart to and fro.

ChartJS Data Overflowing Chart area

I have a chart created with ChartJS that displays datasets ( (x,y) pairs) in a line chart. Based on user requests, I am adding the ability for the user to change the X-max and Y-max values. All well and good until the datasets overflow the Chart area.
This is off the right side of the chart, in the blank space under the legend. As you can see, the lines stop following the points and go crazy until they are clipped by the canvas area.
I would like to clip or mask the visible data using the Chart area, rather than the Canvas area. Is there a setting in ChartJS to do this?
Edit: clarified title
I've found a partial solution. By adding lineTension: 0 to the Chart.dataset object, I was able to get the following:
Changing the line tension to 0 has eliminated the wavy lines outside of the chart area, but I'm still looking for a solution to the data overflow.

Prevent datalabel from appearing above or below pie chart

I am using Highcharts to display a doughnut chart. The chart has dataLabels set up on it.
When the slice of the chart has a midpoint near the top or bottom of the chart, the dataLabel gets put above or below the chart image itself. When the chart renders, this causes the height of the chart to shrink, which is undesirable. What makes the shrinking even worse is the size of the doughnut "hole" is calculated from the height of the chart container and not the chart drawing, so it remains the same, which makes the chart itself very skinny.
Is there a way to prevent the labels from going above or below the chart and keep them from squishing the chart? Or a way I could add that functionality in via a certain event handler or something?
Thanks!

webgl-surface-plot: Clips at Different Rotations

I am trying to use webgl-surface-plot to give a 3D surface plot of data. At several orientations, the axes labels get clipped. At other orientations, part of the graph gets clipped. Is there a way to expand the canvas size and/or move the axes labels closer to the axes?
You can change the default scale/zoom in the code and then just increase the canvas dimensions via the input options. I plan to add the starting zoom as an option to the chart, when I get a chance. I want to fix the axis labels as well. Currently they are at a fixed distance from the axes. They should, instead, be at a distance dictated by the length of the tick labels. Fixing this will be quite tricky, though.

How to customize highchart box plot box

I have to implement candlestick stick graph through Highchart but since Highchart doesn't support candlestick graphs that's why I am trying to implement this through box plot chart in Highchart. For this I am doing this by setting the median to null.
But the issue is that How can I reduce the width of box and also I have to remove horizontal line shows on low point and high point of box plot. Can any body suggest me to do this
You can set pointWidth to make smaller width, but there is no option to remove vertical lines on how and low point, see: http://jsfiddle.net/mTdPh/

Categories