Highcharts: how to make y-axis labels CSS sticky? - css

I have a long data grid that is a combination of a normal html data grid (table) and highcharts horizontal bar charts (1 per row). The TH elements in the table grid are position sticky, and I want the corresponding y-axis labels to have the same behavior. Basically when the user scrolls the table the highcharts y-axis labels scroll up and then "pin" to the top of the view, with teh data grid rows scrolling beneath it.
I can't figure out how to control the y-axis labels to force them to obey position sticky... probably because they're rendering in SVG. Is this possible? Is there a way to replicate the concept of position sticky for highcharts axis labels?

Related

Bars are getting Overalapped with each other when there is less high in Barchart

I have bar chart with dynamically calculated number of bars they overlap with each other when the count is more, I am using high chart for creating this barchart. Is there any way i can make them to stop overlap like vertical scrolling or something
Tried with adding Scrollable Plot Area and adding a Max Value in X axis. But its not giving scroll effect.

Limiting the Y-axis width for a horizontal FusionChart

Using FusionCharts
I am attempting to limit the y-axis width of a horizontal fusion chart.
Current Behavior
The y-axis label becomes too long for the width of the chart so that you see more label than you actually see bars on the chart.
Desired Behavior
I would like to define a max-length or max-width for the y-axis label and show an ellipsis if the label is too long for that width.
Example Label
Existing: I am a very long label and shrink the chart area
Desired: I am a very long label a...
In this example I would only want to show the part of the label that is in the red box:

Reduce padding between axis labels and tick markers on Flex charts

I have a mx.charts.LineChart in Flex and I would like to know how to reduce the padding between the value labels and the tick markers? I've highlighted the region I mean with yellow boxes in the image below.
I'd like the labels to be as close as possible to the tick markers, just a couple of pixels will do.
I only care about applying this to the x-axis.
I'd also be interested to know how to reduce the padding between the axis title (e.g. kB and minutes on chart below) and the value labels.
Use the labelGap style of the AxisRenderer class.
By default it is 3 pixels, you can set it to 0 (or even a negative value if still not close enough).
For positioning the axis title there is no easy solution. You could write the vertical axis title yourself, as a label on top left of the chart. An advantage is that it is much better for the user to read (than the vertical writing).

ColumnSeries is not displayed at center position when LineSeries is added on Column Chart

I have mx:ColumnChart with multiple mx:ColumnSeries and multiple mx:LineSeries, the problem is that when ever i added LineSeries in Column Chart the column Series become smaller (tiny) and and also change position to left.

Javafx chart show more empty space

I am customizing the javafx charts a bit adding valuelabels etc above bars and sliding out certain parts of piecharts. The problem is some of the extras come outside of the visual area.
Is there a simple way to get piecharts to become smaller (but the chart component itself retain its size so that there is more empty space surround the pie?
The same issue with barcharts. I need more empty space above my vertical bars, and more empty space to the right of my horizontal bars.
All data in the table has Number(mostly BigDeicmal) for its value and String for its key and series.

Resources