I am trying to create a graph with plot bands in Highcharts, where I want to insert an icon into the plot band.
It all works well except that I cannot get the icon to show below the actual series line. I set the zIndex of the icon to 1 and series to 2, but it seems to not do anything.
I looked at the documentation here:
http://api.highcharts.com/highcharts/xAxis.plotBands.zIndex
But it should work based on that, but it does not, it works when I use text for the label, but not an image and the object has no specific class or ID so that I could target it with jquery and set the css manually.
To illustrate my point I made a fiddle:
http://jsfiddle.net/qwfj4x3j/
I used for example
{
color: null,
zIndex: -1,
from: 3.5,
to: 4.5,
label: {
text: "<img src='http://simpleicon.com/wp-content/uploads/rain.png' style='width:100px;z-index:-1'>",
verticalAlign: 'top',
useHTML: true,
y: 25
}
},
As you can see, I set the zIndex of both the plot band and the actual image, and a higher zIndex for the series, but it does not work.
OK, so in the end I found a very elegant solution :)
I gave all the images a class and then after the graph is rendered, I call jquery command that targets all parent elements of this class, the span I originally needed to target, but could not because it had no class or id. Now I can call all these as parents of my image with particular class, asign them z-index of -1 and it works :)
If you render an image in that way HTML <img> will be rendered at the top of the svg - this is why the image covers svg elements.
Instead, you can use chart.renderer.image() method combined with axis.toPixels() methods to get x, y attributes in pixels.
var img;
function renderImage() {
var chart = this;
img = chart.renderer.image(
'http://simpleicon.com/wp-content/uploads/rain.png',
chart.xAxis[0].toPixels(0),
chart.yAxis[0].toPixels(10),
150,
150
)
.add();
}
function redrawImage() {
img.attr({
x: this.xAxis[0].toPixels(0),
y: this.yAxis[0].toPixels(10)
});
}
Example: http://jsfiddle.net/qwfj4x3j/2/
To have the image responsive like plot lines you need to adjust x, y attributes on redraw event.
Related
I have a Highcharts chart and I need to modify the rangeSelector section. I've been able to format some of the buttons and input boxes, but I'd like to specify the background color of the entire range selection area. Here's an image of the area I'm talking about (red outline).
Additionally, here's a JSFiddle for that particular chart.
As far as I can tell, there are no options that would allow me to select that section directly listed in the documentation.
I've also tried making a div and positioning it absolutely over the range selector, and then elevating the elements inside the range selector with the Highcharts zIndex attribute, but that doesn't appear to work.
You can use Highcharts.SVGRenderer class to render a rect element, which will be a background for the rangeSelector:
chart: {
events: {
load: function() {
var rangSel = this.rangeSelector.group.getBBox();
this.renderer.rect(
rangSel.x,
rangSel.y,
rangSel.width,
rangSel.height
).attr({
fill: 'red'
}).add();
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/kpbxya8s/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect
Found a good workaround in case anyone runs into this issue as well. Set the chart's overall backgroundColor to a linear gradient with three stops (the first two are your initial color). Here's an example where the top bar needs to be 54px tall.
backgroundColor: {
linearGradient: [0, 0, 0, 54, 0, 54],
stops: [
[0, '#707070'],
[1, '#707070'],
[2, '#e2e2e2']
]
},
I have a svg label which i am drawing using highchart general drawing. I want to know is there any way i can give an option for zoom in to that label on mouse hover.
Below is the code for label.
ren.label('PhantomJS', 210, 82)
.attr({
r: 5,
width: 100,
fill: colors[1]
})
.css({
color: 'white',
fontWeight: 'bold'
})
.add();
It depends on how the rest of your chart is built and what, if any, data live there.
Highcharts has a method to zoom to a specific point, but you need to define what that point is: https://api.highcharts.com/class-reference/Highcharts.Point#zoomTo. You're drawing a label after the chart has been rendered, so it's not part of the chart's data, and therefore, there's no "point" you can zoom to.
Another alternative you could try is triggering the setExtremes() function to update the chart axes and "zoom" in on a particular area of the chart (https://api.highcharts.com/class-reference/Highcharts.Axis%23setExtremes). See the linked fiddle in this Stack Overflow answer: https://stackoverflow.com/a/44875178/2596103. What they did here is use an HTML button that lives outside the chart vs. a rendered label.
You may want to consider annotations (https://api.highcharts.com/highcharts/annotations) and see whether they can get you the zoom feature you're seeking.
I hope this information is helpful.
I have made a highcharts graph which is intended to mirror the following:
I am using a triangle image as a marker for the graph, but by default, the marker is being situated in the center of the bar. I have tried to use the translation function
chart.series[1].data.graphic.translate(0, 20);
but this does not seem to be helping.
Here is my full code:
barchartFiddle
I was also wondering how I would add the percentage to the top of as it would move along with the bar.
Furthermore, I have tried using (multiple versions with different css properties + high zIndex - I will be listing the basic)
chart.renderer.text('blah',50,50).add();
to add the bottom 3 criteria, but for some odd reason, no text shows up.
Finally, I was wondering what logic to add in order to change the appearance of the text, depending on the data, to mirror the one shown in the image (Note difference between acceptable and healthy)
In your jsFiddle you have added your callback function in wrong place, when you will add it correctly it should work fine.
function(chart) {
var marker = chart.series[1].data[0];
marker.graphic.translate(-20, 0);
}
You can use dataLabels for showing the percent value near your marker.
dataLabels: {
enabled: true,
x: -5,
y: 10,
style: {
fontSize: 20
},
formatter: function() {
return this.y + '%'
}
}
Here you can find an example how it can work: http://jsfiddle.net/2TuCW/341/
On using alternateGridColor in the axis, existing plot band gets hidden.(color of grid is visible)
To this fiddle
I've added the code
yAxis:{
alternateGridColor: '#F5F5F5',
}
And the plot band disappeared. Is there anyway I can make the gridcolor in the background and plotband in the foreground.
You can add a zIndex value to the relevant plotband to move the plotband forward/back in relation to the other elements. In your case, for example:
xAxis: {
plotBands: [{ // mark the weekend
// ...
zIndex: 2
}]
}
See this JSFiddle demonstration.
The API description of this property:
The z index of the plot band within the chart, relative to other elements. Using the same z index as another element may give unpredictable results, as the last rendered element will be on top. Values from 0 to 20 make sense.
I'm building in some custom functionality where users can click on data points in a line chart to add notes to that date. This is a bit misleading as the notes aren't actually attached to the metrics themselves but rather the date it lands on. In other words, if I have 6 series on one line chart that spans the dates 01/01/12 - 01/08/12, a single note on 01/05/12 will apply to all 6 series. So, as you can imagine clicking on a data point on one of the 6 series or the date 01/05/12 would mislead the user to believe that this note would be applied to that data point, not the entire date and any series that lands on that date.
So, to remedy this usability issue I've decided that the best visual cue would be something like this:
There would be a clickable icon at the top of each xAxis gridLine that would need to scale with the xAxis gridLine (like if a user selects an area to zoom in on).
Suggestions on best way to pull this off? I only need a suggestion for how best to add the icon to every line... I have all post-click functionality already built.
Building on Mark's suggestion using redraw event to position the images and using load event to create them. Adding them on load is necessary to make them available during export and you would not want to create new images on each redraw either.
These chart events are used:
events: {
load: drawImages,
redraw: alignImages
}
In the drawImages function I'm using the inverse translation for the xAxis to position the images on the chart:
x = chart.plotLeft + chart.xAxis[0].translate(i, false) - imageWidth / 2,
y = chart.plotTop - imageWidth / 2;
and then adding them and setting a click handler, zIndex, pointer cursor:
chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', x, y, imageWidth, imageWidth)
.on('click', function() {
location.href = 'http://example.com'
})
.attr({
zIndex: 100
})
.css({
cursor: 'pointer'
})
.add();
In alignImages the attr function is used to set new x and y values for the images which are calculated the in the same way as in drawImages.
Full example on jsfiddle
Screenshot:
Couple of ideas. First, I would use the chart redraw event to know when the chart is being redrawn (say on a zoom). Then second, explicitly place your images at the axis locations of interest. To get those query directly out of the DOM.
Using jQuery:
$('.highcharts-axis') //return an array of the two axis.
They will have svg "text element" children with (x, y) positions.