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/
Related
I know I can get the actual value to show up in the pie chart, i.e. on the slice. However I want the percentage in the pie chart (which I can get to show up) since it is more likely to fit in a slice and the actual value underneath the label. However no matter what I do I can't get anything besides the respective percentage to show up underneath each slice's label. Help!
I understand that you want to change your pie graph hiding the percentage shown inside the pie slice. If that is your goal, then you only have to update one chart setting. Follow these steps:
Double left click on the chart. The chart editor sidebar will open.
Click on the Customise tab.
Open the Pie chart submenu.
Update the Slice label property from Percentage to None.
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 opened the basic column chart using Highcharts and now I need to make little customization. I would like to change the color of the plot band that is visible when I place the mouse pointer within one category on X axis. I tried to use the xAxis -> plotBand option, but it only changes the color with specific start and end values. How could I change this color on mouseover?
This is some example, how I would like it to look: https://www.dropbox.com/s/ilxhd99xo8pwn7v/Zrzut%20ekranu%202015-09-05%2020.20.17.png?dl=0
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)
When using Highcharts, is it possible to change the contents of the legend to display something other than the series?
For example, I have a scatter chart with just one series but with many elements, so that the element labels obstruct one another and are illegible:
Would it be possible to use the legend to display the element names instead of the series? (each member in the series has a different color so that it is possible to use the legend in this case)
EDIT:
It turns out there isn't any good way to do this, so I wrote my own custom legend. You can find the code here: http://pastie.org/5115536
I hope you find it useful
Highcharts allows to show data points instead of series name in the in the legend. But, Unfortunately its only for Pie charts type:pie.
There is a default option available for the Pie Chart though undocumented in the API.
legendType: 'point',
If you try to set it for other type of chart, Legend does not gets rendered.