Highcharts fixed label length, prevent chart from being resized - javascript

Hi i wonder if it's possible to disable the automatic scaling of a highchart.
Or is ist possible to set a fixed position and or width and height to the labels ?
Here is an example, this is how i'd like to have my chart look like.
http://jsfiddle.net/ynXgw/6/
But if the labels have a different length highchart shrinks the graph.
http://jsfiddle.net/ynXgw/7/
Has anybody an idea how i could fix this?

One way to solve your problem is to use a different series to display the labels. In this example I use a second scatter series to display the labels. To position the labels just set the y value. I set the color of the points to the same color as the background to hide them. Then I use the dataLabels formatter to display the labels how you want them.

Related

Bars chart for different number of bars in D3.js

I want to create chart only using d3 library. My chart will have different number of vertical bars depending on data and x-axis for this. My question is how to set chart dynamically and set x-axis ticks under every bar. It will be better if width of bars will be constant.
I tried to use ranges and scale but i dont actually understand how they works. Even with some topics)
I think you should use "Grouped Bar Chart".
Refer this block from Mike Bostock.
https://bl.ocks.org/mbostock/3887051

Responsive grouped bar chart in d3js with responsive scale values

I am following this example to create grouped bar chart. But the chart lacks responsiveness. I want to run it dynamically in all kinds of devices. I want to make it look something like the below chart(not same as chart above copied from an example of a responsive chart):
And also in above example the x-axis range is overlapped is it possible to make it tilted to so that all values are clear something like below pic so that all x axis range values are displayed.
The responsiveness of the chart is fixed however the scale values overlap on each other and instead of overlapping I want them all to adjust and appear.

Dynamic FLOT legend table

I have a somewhat limited knowledge of JS and JQuery so I am sorry if this is a stupid question. I have a dashboard of charts which will have varying widths and also allows a user to change the width. The chart automatically adjusts it's size. What I want is for the legend to appear under that chart but fill the width given. My issue is it seems that the number of columns for the legend is set once and unable to be updated. So if I a chart that covers the entire width of the page I want to be able to show a larger number of columns, but if the chart only has a small amount of width space I would like it to use less columns. I can capture the width and figure out the number of columns I would like but is it possible to redraw the legend dynamically? Thanks for the help!
You need a reference to the plot object returned from $.plot, then it's:
plot.getOptions().legend.noColumns = 3;
plot.setupGrid();
plot.draw();
Example here.

How to display chart data in vertical direction using dojo

I'm using DOJO column charts in my application. Here i have a requirement to display the value on top of the bar. That can be achieved using the label property. After doing this i had another problem i.e. If the value is large then all values are getting overlapped as shown below
In order to overcome this overlapping issue i was trying to display the label in vertical direction. Can you guys help me solving this issue
You can rotate the labels using the "rotation" attribute when you create the axis
For example:
chart.addAxis("x", {labels: xLabels, rotation: 90});

Highcharts date tick position hiding removing

I have tried using all sorts of combinations of tickInterval, tickPixelInterval label formatter and tickPositioner and I haven't been able to solve this issue.
I have a chart builder that pulls in different feeds and allows the user to modify the date range of those feeds before shooting this data into highcharts and spitting out the chart.
The problem is that some of the time, the first and/or last dates get cut off. Here is an example:
Without adjusting the margins of the chart (which causes the chart to take up less space), how do I prevent this from happening?
If I was able to determine the pixel location of the ticks and their labels, I could in theory, hide the specific ticks and their corresponding labels which were located outside the graph / cut off. Thoughts?
Without looking at your code - there are a few things you can do.
Rotate your labels
Play around with the x/y axis labels
Align them to the right
Hopefully one of these would help your cause.

Categories

Resources