Is it possible to hide the range selector but the input(dates) box should be visible and should allow us to provide the to and from date range? Any API reference will be of great help.Thanks
Just use CSS
.highcharts-range-selector-buttons {
visibility: hidden;
}
Related
We have been given a mock up:
Im looking around on highcharts but i dont see if i can do this. The thing im looking for specifically is a custom string/value above the x axis category.
As far as i can see the x axis category is just an array of strings, so i cant use html or anything even
From docs:
HTML in Highcharts
Texts and labels in Highcharts are given in HTML, but as the HTML is
parsed and rendered in SVG, only a subset is supported. The following
tags are supported: <b>, <strong>, <i>, <em>, <br/>, <span>. Spans can
be styled with a style attribute, but only text-related CSS that is
shared with SVG is handled.
Most places where text is handled in Highcharts, it is also followed
by an option called useHTML. When this is true, the text is laid out
as HTML on top of the chart. This allows for full HTML support and can
be a good idea if you want to add images in your labels, tables in
your tooltip etc.
So, you can use HTML tags in categories array, for example:
xAxis: {
...,
categories: [
'<span style="font-size: 16px; color: red;">-22.5%</span><br>CLIENT<br>CALLS',
...
]
}
Live demo: http://jsfiddle.net/BlackLabel/kLu7rtea/
Docs: https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting
API Reference:
https://api.highcharts.com/highcharts/xAxis.categories
https://api.highcharts.com/highcharts/xAxis.labels.useHTML
Is there any way to update the color of a single point in a grouped data set? I can't seem to find a way to reliably set the colors.
A fiddle can be found here demonstrating the issue.
Points are grouped during the rendering process of the chart so they cannot be specifically targeted via constructor options (because we don't know which points will be generated by Highcharts algorithms).
What is more, Higcharts doesn't allow performing update function on the grouped point.
As a workaround your can change the CSS of point's SVG element:
chart.series[0].groupedData[0].graphic.css({
color: 'red'
});
Live demo: http://jsfiddle.net/BlackLabel/9ey2yq3u/
API reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#css
When putting multiple charts tooltips from upper charts are hidden behind others.
I found some tips on how to it but nothing helped.
Is there anyway to keep tooltips on top of charts?
The example is here: http://jsfiddle.net/Zw3uM/
Thanks a lot!
This is pure html : Any div element loaded after ( meaning appearing after on the html page) will always be in front.
In order to get the first chart tooltip be in front of the second : load the second in first and set its y position on the page using an absolute or relative position in css :
I've change their order, putting the container2 in first in html:
<div id="container2" style="height: 200px"></div>
<div id="container1" style="height: 200px"></div>
Then set the position of container2 to be under the first one (thanks to the top style attribute) :
div[id="container2"] {
position:absolute;
top:200px;
}
Here is the result : http://jsfiddle.net/Zw3uM/3/
You can use tooltip pisitioner:
http://api.highcharts.com/highcharts#tooltip.positioner
The problem is due to each highchart container having its own stacking context. This is because the highcharts-container has both position: relative and z-index: 0 (css dynamically applied by the highcharts library).
So the z-index of the tooltip has meaning only in its parent highchart container.
To fix this we need to override the (z-index: 0) rule for the highcharts-container using the following:
.highcharts-container
{
z-index: auto !important;
...
}
This way all hightcharts-containers & their children would share the same stacking context and their z-indices would apply the desired effect.
You can check the fix here: http://jsfiddle.net/w5bLo1cw/4/
I am using the HighStock JS lib to produce a chart that uses a linear series (not a time-series) for the xAxis.
I'd still like to use the range-selector in order to zoom to pre-determined ranges within my linear series. Is this possible?
For example; say my xAxis has a series:
[[121,616],[122,600],[123,605],[124,585.5],[125,575.5],[126,580.5],[127,582],[128,582],[129,584],[130,583]]
I'd like to use the range selector to zoom to the last n in the series.
I don't think that is supported out of the box. But what is supported is Axis.setExtremes()
You can dynamically set the zoom of the xAxis using this method, and hence you can create your very own range selector for non timeseries charts
Axis.setExtremes() How to # jsFiddle
My attempt at custom range selectors # jsFiddle
How can I change my tool-tip so that it has a working auto width. I think the problem is at the relative position of the link.
See here my problem http://jsfiddle.net/kzJRW/
How can I fix this and the tooltip works still as I defined.
Thanks for your help!
http://jsfiddle.net/kzJRW/13/
The white-space property helps not break words. I also rearranged some of your declarations, non-changing values such as layout positioning and box-shadow colors don't need to be declared in the :hover pseudo-class.
#shub; you need to just write white-space:nowrap;
like this:
.tooltip span {
margin-left: -999em;
position: absolute;
white-space:nowrap;
}
example http://jsfiddle.net/sandeep/kzJRW/14/
in a tag along with position:relative give display:block
Check this:
http://jsfiddle.net/kzJRW/9/