I'm looking to use highcharts to create a graph with a custom (1/K) scaled x-axis for a chemistry application. I need the tick marks to be spaced differently, but not in a logarithmic fashion. For example, let's say I want the spacing between the 40 Kelvin x-axis tick mark and the 50 Kelvin tick mark to be 100px (arbitrary value), but then I want the spacing between the 140 x-axis tick mark and the 150 tick mark to be smaller than that (to be consistent with the scaling). The question is, how do I make the spacing between two tick marks (both 10 Kelvin apart) different sizes (to be computed with a formula)?
You should be able to do what you want using the xAxis tickPositioner function (http://api.highcharts.com/highcharts#xAxis.tickPositioner).
Related
I found some article about changing the font size of the actual x axis TITLE but what I would like to do is see if I can make the font for the actual values small enough so that it shows the value for each point in the series. As in example image, I have twice as many data points as x-axis labels for them, is there some way to force the plot to show all the values (i.e for each point), either explicitly or by changing font size?
(sorry I clipped off the top of the image but the points which align with the white horizontal lines get the x axis labels and the ones inbetween don't). I don't know if this is a tick mark spacing issue or a font size/display limitation.
I am plotting in a Jupyter notebook 8 of these figures 2 cols, 4 rows, so I am pretty limited by display size
I am having Axis Labelling Policy as Fixed Interval for the X-axis . Now on zooming I want the minor tick labels to be shown.Is there any provision for setting the axis labelling policy on the minor ticks that allows for this or in what way can this be achieved.
Use a plot space delegate to monitor changes and add the minor tick marks when zoomed in far enough. Set the minor tick line style to nil to hide them or to a CPTLineStyle to show them. You shouldn't need to adjust any other properties, unless you want to vary the number of minor tick marks based on the zoom level.
I have three pie charts displayed in a row. Two have two segments, one has five. All three have vertical legends.
Given that, the chart with five segments displays the pie slightly smaller, due to the extra height of the legend. It also has a slight negative vertical offset.
Is there any way I can set all three charts to render the chart in the same position? I've tried setting the center to 50%,50% in plotOptions, didn't help.
You have to set the marginBottom-Value of the chart to a value that is equal an all charts. Highcharts is trying to display the pie as big as possible, therefore it will use more space if the legend is not as big.
By setting the marginBottom you force the chart to ignore the actual legend size.
The center: ['50%','50%'] setting will only take into account the actual plot area. So if this area is decreased because of a taller legend it has no effect.
I made a jsfiddle where you can explore this settings:
http://jsfiddle.net/doc_snyder/dsmgy6ts/
I have more than 4 bar charts in a coreplot graph.When the number of charts become more than 3,the charts becomes overlapping and cannot differentiate between the X axis labels.
How to increase the tick space between the x axis labels so that space always remains between the 2 x -axis labels?
The below image is when I have 3 bar charts,then the spacing looks good.
the below image is when I have more charts then there is no spacing between the ticks.
Reduce the barWidth and adjust the barOffset of each plot accordingly. This will allow more bars to fit between each label on the x-axis. You'll also need to reduce the length of the plot space xRange and/or make the graph wider to spread out the plots so the data labels don't overlap.
Please refer the fiddle codehttp://jsfiddle.net/yuvarajkumarg/az290eyq/1/
In Highchart of type Chart, when we plot for height = 0 and pressure = 2, we get a gap as shown in jsfiddle. I want point to be plotted on the X-axis(2,0). But the graph looks like it is plotted on (2,2) since the y-axis plot starts way above the x-axis. How to remove the gap ?
The issue is the categorized axis.
There are probably a few ways around the issue, but I would do it this way (on your xAxis):
tickmarkPlacement: 'on',
min:0.5,
max:6.5
Example:
http://jsfiddle.net/az290eyq/2/
You could also do it by not using categories, and using the axis label formatter in order to display the numeric sequence that you need.
[[ edit for comments:
For the min and max values - the x axis values for a categorized axis are the category array index values. So the first category is x = 0, the second is x = 1, etc.
Because Highcharts puts the the label in the center of the value's space, setting the min/max to the actual min/max value +/- 0.5 will align the center of the space with the start/end of the axis.
So, you can calculate this dynamically by using 0.5 for the min, and counting the categories array and using (count -1.5) as the max.
Additionally, setting the tickmarkPlacement proerty to 'on' moves the tick mark to the center of the space as well, aligning the ticks with the start/end of the axis as well.