I need to show all the text in label without ellipsis, But I cannot predict the number of lines that the label will take.
Is it possible to give some margin between each label and show
the bar in center align to label? (with or without varying the
distance between each bar)
Is it possible to calculate the distance between each bar?
Is it possible to calculate the number of lines the label will take?
Here I am setting the height of the chart with number of bars in it with a random guess of each label taking 4 lines.
Image is altered, Sometimes it there are labels with single lines & some times multiple lines.
Example:
This information may be useful in context of the question 3. (answers for questions 1 & 2 appeared in the comments below the question):
Dividing a label text to separate lines (in case when useHTML === false) is performed in Highcharts.SVGRenderer.prototype.buildText function.
In this live demo I've overwritten this core function and added console.log that prints how many <tspans> were generated for a specific line: http://jsfiddle.net/kkulig/x2619jmv/
It seems that Highcharts may run it multiple times before it finds the proper configuration of the labels.
Related
normally I would have some full-blwn code to post with my questions but this is a very generic question... I have create a chart with two y-axis on echarts through yAxis: [{name:'abc', type:'value'},{name:'xyz',type:'value'}]. both axes might have data that goes to negative, but the second axis doesn't always have negative numbers. I would like both axes' 0 value line to align at the same level at all times. As the range of both axes individually might vary greatly depending on the dataset supplied, I wouldn't want to manually set the ranges for them and would like to rely on echarts built-in capability to decide on an appropriate range as long as the zero line is aligned. is this possible at all? thanks in advance
I used the multiple axes on the highchart
During Zoom operation the x values are getting hidden
I used linked to attribute also
JsFiddle
zoomType: 'y',
zoomType: String
Decides in what dimensions the user can zoom by dragging the mouse. Can be one of x, y or xy.
Try it:
None by default
x
y
xy
I referred this jsfiddle to figure out what's happening. I think, this behavior is not a bug/issue.
This github issue mentioned in comments is not the problem here. Because what it is saying is to use linkedTo: 0 which is already present in this example.
It actually depends on how much area and more importantly from where to where you select for zooming in. Let's see that by examples:
In the following image, the rectangle signifies the width of one column.
Now, if you start your pinch from more than half of the width of any column or end the pinch after half of the width of a column, that column would be fully visible along with x-Axis labels.
But, if you pinch any less, say from the middle of orange bar of first column, till middle of next column's blue bar, it's not going to show whole columns and hence it ends up with hidden x-Axis labels.
I'm trying to make a population pyramid type of chart with both bars and lines at the same time.
I also need to place a checkbox to allow the user to switch to percent values.
The problem i'm facing is that the line series are not behaving the same as the bar series when i set stacking:percent
The values of the two line series are copied with just a minus in front so i'd expect to see all the values to 50% when switching to percent. But for some reason the blue line is always at 0%.
jsFiddle
EDIT:
As Bobby Orndorff explained in the comment:
When stacking line/area series, you add the values of the second series to the values of the first series. If the values of the second series have the same magnitude but different sign then the sum will be zero (i.e. the second series will be plotted at zero). When stacking bar series, positive values are stacked above the zero and negative values are stacked below zero.
So now my question is:
How do i achieve the same effect as the bar series but using the line/area series? Is it possible without manually editing the dataseries (doing the percentages myself)?
I have a Gantt chart, and I need to make the duration scale to one day. Currently there's a label for every other day only.
See image below:
The axis chooses granularity and number of labels / grid lines based on available space, so that it does not look crammed.
You can influence it in a number of ways:
1) Set (reduce) minHorizontalGap for your value axis.
This setting defines how much free space there should be between labels. The less the number the more labels the chart will display.
OR
2) Disable autoGridCount and set gridCount manually.
With both approaches you might need to play around with the numbers to find the one that works for your chart setup and available space.
I need to draw a graph to display engine status.That is i will be having time like 1-2,2-3,3-4 along axis and by using bar graph i need to display whether engine was on or off at these time.
That is from 1-2 if it is off it will how black and 2-4 if it is on it will show blue color and again if the status is changed it should show black from blue.Right now i have customised jquery high charts for displaying one bar,by removing some parameters.
I need to know how i implment this here or is it possible in this graph?
You can do this with a column range chart, with minimal fudging.
The main issue is making sure you set your data points correctly, and to set grouping:false in the plotOptions. The x value needs to be specified for each data as well, or else they will all be given a separate x value
Example:
http://jsfiddle.net/jlbriggs/o9ck2zLn/
This can easily be adapted to a time axis by supplying the timestamps as the y values.