I want the grid lines of highchart to appear only till 75% of the chart height and rest of the chart should not show the grid lines. Is there a way to set the height of grid line?
xAxis: {
gridLineWidth: 1,
gridLineDashStyle: 'longdash',
gridLineColor: '#B3BABB',
}
In general, it is not supported, but simple change will allow you that: http://jsfiddle.net/ngk6vtbh/
(function(H) {
H.wrap(H.Tick.prototype, 'render', function(p, index, old, opacity) {
var tick = this,
d,
size = 0.25; // = 75%, 0.5 = 50%, 0.75 = 25% etc.
p.call(this, index, old, opacity);
if(tick.gridLine && this.axis.isXAxis) {
d = tick.gridLine.d.split(' '); // get default path
d[2] = ( d[5] - d[2] ) * size + tick.axis.chart.plotTop; // modify path - don't forget about plotTop
tick.gridLine.attr({
d: d // apply new path
});
}
});
})(Highcharts)
Related
I have a chart with some indicators below it. Each indicator area consists
of a svg renderer button. so when I use resize property to drag and resize
the panes, the series resized perfectly but the button remains in its same
position, Can we move the button with the resizer?
Here I created a sample link to regenerate
https://jsfiddle.net/q0ybpnvx/2/
Any help will be appreciated. I am having great trouble. Thank you
You can add and position the custom button in render event:
chart: {
events: {
render: function() {
var chart = this;
if (chart.customBtn) {
chart.customBtn.attr({
y: chart.yAxis[1].top,
});
} else {
chart.customBtn = chart.renderer.button(
'sometext',
5,
chart.yAxis[1].top,
function() {
console.log('some task')
}).add()
}
}
}
},
Live demo: https://jsfiddle.net/BlackLabel/b7vq4ecy/
API Reference:
https://api.highcharts.com/highcharts/chart.events.render
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
I was able to do something by manually changing the x/y attributes of my svgRenderer label, the same should apply to buttons.
I'm in angular and have a listener for screen resizing:
Also Note that you can change the entire SVGRenderer label with the attr.text property.
this.chart = Highcharts.chart(.....);
// I used a helper method to create the label
this.chart.myLabel = this.labelCreationHelperMethod(this.chart, data);
this.windowEventService.resize$.subscribe(dimensions => {
if(dimensions.x < 500) { //this would be your charts resize breakpoint
// here I was using a specific chart series property to tell where to put my x coordinate,
// you can traverse through the chart object to find a similar number,
// or just use a hardcoded number
this.chart.myLabel.attr({ y: 15, x: this.chart.series[0].points[0].plotX + 20 });
} else {
this.chart.myLabel.attr({ y: 100, x: this.chart.series[0].points[0].plotX + 50 });
}
}
//Returns the label object that we keep a reference to in the chart object.
labelCreationHelperMethod() {
const y = screen.width > 500 ? 100 : 15;
const x = screen.width > 500 ? this.chart.series[0].points[0].plotX + 50 :
this.chart.series[0].points[0].plotX + 20
// your label
const label = `<div style="color: blue"...> My Label Stuff</div>`
return chart.renderer.label(label, x, y, 'callout', offset + chart.plotLeft, chart.plotTop + 80, true)
.attr({
fill: '#e8e8e8',
padding: 15,
r: 5,
zIndex: 6
})
.add();
}
In Highcharts, there is a possibility to shift the y-Axis labels into the plot-area with
yAxis: {
labels: {
align: 'left',
x: 0,
y: -2
}
}
With this setting, the labels are covered by the lines, data-labels and so on.
Is it possible to draw the horizontal grid lines across the yAxis-Label-Area without making the xAxis and the series start there. The wished behavior is indicated with the black lines in the image below.
The simplest solution is to adjust the xAxis, for example:
xAxis: {
min: -0.5
}
Live demo: http://jsfiddle.net/BlackLabel/qnayxb04/
API: https://api.highcharts.com/highcharts/xAxis.min
If you want to have more control over the lines, you can use setAttribute to edit the path element:
chart: {
events: {
load: function() {
var gridLines = this.yAxis[0].gridGroup.element.children,
i,
path;
for (i = 0; i < gridLines.length; i++) {
path = gridLines[i].attributes.d.nodeValue;
path = 'M 40' + path.substr(4);
gridLines[i].setAttribute('d', path)
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/61h5qtn9/1/
I'm trying to replicate the effect on the image but with no luck. On another post someone answered on how to achieve multiple axis lines (see link at the end), but I am unable to achieve the style (labels to maximum width inside the gray and blue boxes).
Previous post: Highcharts: How can I achiveve multiple rows on chart labels?
I would use Highcharts.SVGRenderer to draw rect elements, based on the ticks from the second xAxis and translate the labels. Please check the example below:
chart: {
events: {
render: function() {
var ticks = this.xAxis[1].ticks,
x = this.plotLeft,
y = 378,
width,
color = 'blue',
textColor = 'yellow',
height = 28;
if (!this.customTicks) {
this.customTicks = [];
} else {
this.customTicks.forEach(function(cTick) {
cTick.destroy();
});
this.customTicks.length = 0;
}
Highcharts.objectEach(ticks, function(tick) {
if (tick.mark) {
width = tick.mark.getBBox().x - x;
tick.label.element.children[0].setAttribute('fill', textColor);
tick.label.attr({
translateX: -width / 2
});
this.customTicks.push(
this.renderer.rect(
x,
y,
width,
height
).attr({
fill: color
}).add()
)
x = tick.mark.getBBox().x;
if (color === 'blue') {
color = 'gray';
textColor = 'white';
} else {
color = 'blue';
textColor = 'yellow';
}
}
}, this)
this.customTicks.push(
this.renderer.rect(
x,
y,
this.xAxis[1].width + this.plotLeft - x,
height
).attr({
fill: color
}).add()
)
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/s7vfkgzt/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect
Hot to always position the tooltip on top of the point?
Is there a way to position the Highcharts tooltip always on top of the hovered point? I tried using the tooltip > positioner to fix the position, but if the point in on the edge of chart then the tooltip gets cut.
positioner: function(labelWidth, labelHeight, point) {
var tooltipX = point.plotX + 20;
var tooltipY = point.plotY - 30;
return {
x: tooltipX,
y: tooltipY
};
}
1. Without the positioner block :
2. With the positioner block :
3. Expected result in all cases :
You can wrap the getPosition method and recalculate the tooltip position:
var H = Highcharts;
H.wrap(H.Tooltip.prototype, 'getPosition', function(proceed, boxWidth, boxHeight, point) {
var result = proceed.apply(this, Array.prototype.slice.call(arguments, 1));
if (result.y > point.plotY) {
result.y = result.y + (point.plotY - result.y);
}
return result;
});
Live demo: http://jsfiddle.net/BlackLabel/156nydh4/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
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;
});