I need to add a background image to the container div of highcharts
I think that this will meet your needs: http://jsfiddle.net/RYvcJ/2/.
Simply set transparent color for entire chart and use CSS.
just set this in chart of highcharts object ,
and set the x,y position and width and height of image , according to requirement
events: {
load: function() {
this.renderer.image('img/SqueezeBallEggOran500.jpg', -28, -5, 345, 301).add(); // add image(url, x, y, w, h)
}
}
Related
I want some customization in the Gantt chart as follows:
display some text/html on the top left section (interaction of x and y-axis)
show x Axis (header) with black color in the background and some other customization in styles but got nothing in documentation.
Please refer attached image.
https://i.stack.imgur.com/Ir1gN.png
You can render text via SVG renderer, set position from the plot area. What interaction section do you mean, could you show screenshot?
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
Gantt chart is draw by line, and draw automatically, you can't find background options for axis in our documentation.
Possibility to make this is draw rectangle by SVG renderer and set them under draw line.
chart: {
events: {
render: function() {
var chart = this,
series = chart.series,
plotLeft = chart.plotLeft,
plotTop = chart.plotTop,
plotWidth = chart.plotWidth;
if (chart.myBackground) {
chart.myBackground.destroy();
}
chart.myBackground = chart.renderer.rect(plotLeft, plotTop, plotWidth, 50, 0)
.attr({
'stroke-width': 2,
stroke: 'red',
fill: 'yellow',
opacity: 0.5,
zIndex: -1
})
.add();
}
}
},
Live demo:
https://jsfiddle.net/BlackLabel/xmg31aez/
I have a column chart that has yAxis labels inside the plot area. DEMO: http://jsfiddle.net/o4abatfo/
This is how I have set up the labels:
yAxis: {
labels: {
align: 'left',
x: 5,
y: -3
}
}
The problem is that the leftmost column is so near the plot area edge that labels are overlapping it. Is there a way to adjust the plot area padding so that the columns would start a bit further on the right?
You can set min value as -0.49.
http://jsfiddle.net/o4abatfo/2/
One possible solution:
Keep the labels on the outside, and apply the plotBackgroundColor as the chart backgroundColor.
This means that the legend will be encased in the background color too, but, again, it's on option.
Example:
http://jsfiddle.net/jlbriggs/o4abatfo/11/
I asked the same thing in the Highcharts forum and got this solution as a reply from #paweł-fus:
var chartExtraMargin = 30;
Highcharts.wrap(Highcharts.Axis.prototype, 'setAxisSize', function (p) {
p.call(this);
if (this.isXAxis) {
this.left += chartExtraMargin;
this.width -= chartExtraMargin;
this.len = Math.max(this.horiz ? this.width : this.height, 0);
this.pos = this.horiz ? this.left : this.top;
}
});
However, adding this made the tooltips appear in the wrong position. This was fixed by overriding the Tooltip.prototype.getAnchor() method and adding the extra margin in the x coordinate:
Highcharts.wrap(Highcharts.Tooltip.prototype, 'getAnchor', function(p, points, mouseEvent) {
var anchor = p.call(this, points, mouseEvent);
anchor[0] += chartExtraMargin;
return anchor;
});
I need help with the y-axis of polar charts like spiderweb or windrose.
I've an application with an dashboard which contains some widget, each containing an iframe with an Highcharts chart.
Because these widgets are reziable, I've some javascript for resizing the container of the charts.
$(window).bind("resize", resizeChart);
function resizeChart() {
var width = $(document).width() - 55;
var height = $(document).height() - 60;
$("#container").css("width", width);
$("#container").css("height", height);
}
Some example: http://jsfiddle.net/CwnDw/
My problem is, that the scale of the y-axis often look very ugly. When the chart loads the y-axis has only one tick.
After resizing the chart to + 10 px, it contains no tick, and after resizing to the inital size, the y-axis renders with 5 ticks. I don't understand why.
In my example I only get these effect when I resize the chart from a small size to a bigger size very fast.
Is there a better way for resizing a chart? I tried the chart.setSize() function to, but no effect. Or: is there a way to rerender/recalculate the y-axis?
Thank you
Torben
I'm not sure about a redrawing method that would accomplish what you are looking for, but with my experience using Highcharts, I found it is best to specify tick positions to avoid any unexpected results.
Here is a link to Highchart documentation regarding yAxis: tickPosition
http://api.highcharts.com/highcharts#yAxis.tickPositions
There is a pretty good jsFiddle example there that should cover implementation.
Try this:
function resizeChart() {
var width = $(document).width() - 55;
var height = $(document).height() - 60;
$("#container").css("width", width);
$("#container").css("height", height);
setTimeout(function () {
chart1.setSize(
width,
height,
false
);
},10);
}
http://jsfiddle.net/9YFB8/2/
I am building a pie chart where the labels for the data points can very greatly in length, the legend is configured to be vertical and positioned on the left side.
I have added a label element to the bottom of the chart that shows the total of all data points.
The problem I am facing is that the positioning of this label (via the style element) is based on how wide the legend is, which occasionally if the legend is wide enough will be pushed off the right side of the chart.
Does anyone know of a way that I can style this label so that is positioned based solely on the width of the entire chart.
Here is the styling applied to the label (I tried adding the position value but this didn't appear to do anything):
style: {
top: '325px',
position: 'absolute',
left: '-160px',
'font-size': '175%'
}
Here is an example of the chart that I'm working with, you can see that the value for the total has bee cut off.
EDIT:
As per Sebastian's comment I was able to effectively solve the issue by using the legend label formatter to limit the length of the series names. Here is the code:
labelFormatter: function () {
var formattedName = this.name;
if (formattedName.length > 17) {
formattedName = formattedName.substr(0, 14) + '...';
}
return formattedName;
}
Have you tried to use labelFormatter http://api.highcharts.com/highcharts#legend.labelFormatter ?
I have a highstock chart witch candlestick data type.
When I mouseover the data point, I want to highlight the background of the point.
This is what tooltip -> crosshairs do:
tooltip: {
crosshairs: true
}
But the only width option to set is the fixed width. See http://jsfiddle.net/8YBd7/.
This fixed width works with initial zoom, but when I change the zoom, the width is not updated with new point width.
When I set 100% width, the crosshair would fill entire chart area:
tooltip: {
crosshairs: {
width: '100%'
}
}
Is there another option how to highlight current data point by changing its background or setting the width to the pointPixelInterval or something else?
Meanwhile, I produced a dirty workaround, so improvements are welcomed:
xAxis: {
events: {
afterSetExtremes: function() {
this.chart.tooltip.crosshairs = [];
this.chart.options.tooltip.crosshairs.width = (this.width / (this.series[0].points.length-1));
}
}
}
http://jsfiddle.net/QbdEu/1/
Whenever the zoom is changed, the width is recounted according to chart width and number of displayed data points. The width is not updated when calling redraw(), so the old crosshair needs to be removed.
Have you tried to use Renderer http://api.highcharts.com/highstock#Renderer.rect() which allows to plot any shapes and defined width? Only what you need is getting point width in pixels frpm(chart.series[0].data[0].graphic) and then setting correct widht of "shape".