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)
Related
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:
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/
How to configure the chart options to get a constant height chart
regardless the number of series displayed in the legend ?
Below 2 links to exported charts showing the problem.
Notice that the height of the chart has descreased.
Ideally, the legend would be displayed at the bottom of the
chart when user process to an export of the chart.
Let me know if I have missed something from the documentation.
Best regards
Patrick
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.
In a candlestick graph i am building, the latest bar is cut-off partially such that even the bar is not visible. Thus it's difficult to judge the high and low by seeing the bar.
I'm unable to post a pic now but it's like the last rectangle being cut in half.
I'm tried a lot of options in the api but can't figure out why this is not showing correctly. The chart margin and axis offset options havent' helped. Is there a way i can set the series margin from the plot area so that it displays right.
For this problem, the best solution is to insert a dummy series which should be hidden from every aspect of the chart. So try this, insert a dummy series from the last point of the data series to some extra buffer(as per need). Then remove this series from the chart by explicitly removing it from the legends (using showinlegend),chart(setting linewidth to 0) and from tooltip by having a check in formatter. Hope this solves your problem.
I had the same problem and couldn't figure it out, because no matter how I changed the xAxis.maxPadding or changed the xAxis.max, it would always cut off the last candlestick when I clicked on the range selector.
To solve it, (hack) I just added an extra data point in my series and set it 1 day past the last day and set all values to null.
Without any code or a pic, it's hard to tell the problem, but it sounds like you need to use the max padding option. http://api.highcharts.com/highcharts#xAxis.maxPadding. You may also want to look at endOnTick as well as whether you are setting max on the axis.