We have a request from customer and we need to trick the highcharts bar view.
The problem is our series contain timestamp vs value but business wise this value is corresponding to previous timestamp to that value's timestamp. So we would like to show the bars in between of these timestamps.
So is there an easy way to do this in highcharts w/o playing with the points in the series.
See images below;
Current Highchart Behaviour
Requested Chart Behaviour
You can use xAxis.tickPositioner in order to move ticks and xAxis.labels.formatter to change labels values.
Live example: https://jsfiddle.net/h9zjmqap/
Output:
Related
I have a live graph that updates every x time. Included below is an image using a dummy variable. What I would like is for Highcharts to only label the first, middle, and last. Or anything to where I don't spam my graph label with ticks.
Presently my xAxis looks like so:
xAxis: {
crosshair: true,
type: "categories",
categories: xaxis
},
Nothing out of the ordinary. I have tried adding a tickInterval, however, that does not really solve the issue over the long run. Essentially what I need is the opposite of a tickInterval, where ticks are removed after a certain interval. Not unlike the datetime API that highcharts currently has. The difference here is that this data cannot be generated by myself, but by an API that I am using, which spits out the as-shown x-axis label.
After a while, in case there is too much xAxis labels displayed on a chart, the number of them is automatically reduced (the first example). Although, if you want, you can use couple of solutions. The best way, would be to use tickPositioner to display only the first, the middle and the last labels and format them using Highcharts.dateFormat inside xAxis.labels.formatter (the second example). You could also set bigger step of xAxis.labels (the third example).
API Reference:
http://api.highcharts.com/highcharts/xAxis.tickPositioner
http://api.highcharts.com/highcharts/Highcharts.dateFormat
http://api.highcharts.com/highcharts/xAxis.labels.step
Example:
http://jsfiddle.net/vxjdwer7/ - default behaviour
http://jsfiddle.net/30t45zvq/ - using tickPositioner
http://jsfiddle.net/6g9uvokL/ - using step
I'm trying to create a gauge chart with the ticks rendered on top of the bar. Ideally, it would look something like this:
However, I haven't been able to find a setting to change their render order. Right now, my chart looks like this:
Is there a way to change the rendering order of the ticks and the bar in Highcharts' gauge charts?
Using the examples provided by highcharts, i'm able to create a gauge where the ticks are rendered above the gauge bar. It has to do with the zIndex property of the yAxis. Using the template provided by highcharts, in the gaugeOptions object, set the yAxis:zIndex property to 100. Then in the actual gague config/data object, set teh yAxis:zIndez to 99. When you do this, the ticks will continue to appear over the bar even as it passes the ticks value. Take a look at the highcharts updated jsFiddle:
http://jsfiddle.net/3tsrxfq5/1/
I have a situation where I need to remove all margins from a highchart and remove the x/y axis so it fills a series of columns in a table completely.
I did that, no problem. Chart goes to the extremes as needed.
What I need now is that pesky yaxis I already removed...but displayed in a table cell outside of the existing highcharts object.
It would seem easy, as though I could just set the overflow property of yaxis to 'visible' and play with the offset...which would work however this would only work if I wanted to re-position the axis within the boundaries of the highchart object. I want him in a different cell entirely.
Is there anyone who has had experience in this situation? Is it going to require me to have a secondary highchart with only a y-axis?
Best answer gets a green check.
EDIT :: I now have dispersed each 'day' into their own column (more bars coming per day [scheduled,actual,etc...]). In order to keep the scales lined up, I manipulate the yAxis:max property and set them all to a derived value.
In the open column (currently w/ text Hourly Trends) is where I would put an additional highchart module with no series data but with the same min/max/tickInterval.
The next big leap will be to see the data is alive and changes w/ schedule. May have to start another thread for that one, no?
Create a new HC object with no data but only the yAxis (making sure it is the right scale, etc). Perhaps add the same series of data to it but hide the series? Add it to the location you want. This seems kludge and not very good practice. Each business use is different but why would you want this?
EDIT based on comment of business rules:
Why not come at this from a different direction and have the individual chart elements (the bars/points/etc) be a single point chart. This way you have one chart per column. You can then set up the yAxis to be text and not worry about the position. If we could see an example of the page layout and the desired result that would help.
I am using highcharts library to draw chart and I need to display Weekdays as labels on x-axis and also to auto reset it like from Monday to M if all weekdays can't fit on screen.
It should be dynamic, which means no flickering should appear when changing label text on x-axis.
Any suggestions?
Thanks in advance.
There is no straight option for that, rather simple workaround:
Disable reflow from Highcharts, use window.resize browser event
In that event add condition to decide showing full name of just shortened, and set this for chart - chart.xAxis[0].dateTimeLabelFormats should be fine
After setting new format, apply new chart dimensions using chart.setSize(w, h)
I am new to highcharts and trying to show the chart and data at the same time.
Like the whole display should be like this.
First column : Station Name(data)
Second column : horizontal bar
Third column : Data.
Is it possible to paint it only using highcharts API's ?
Thanks
Sukanta
You are basically talking about a regular bar chart with a categorical axis and data labels:
http://jsfiddle.net/JVNjs/288/
categories:['group a','group b','group c','group d','group e']
I don't think that there is a default setting that will align the data labels all to the right in a column as you requested, but I am sure there is a workaround that will allow it to be done.