I saw a similar question here.
In reply its written that we can have background color by making a rectangle.
My question is how I can get x and Y position of all the ticks on axis. I will need it because I want background color only on alternate dates.
Thanks
Here's a quick example that shades between the 2nd and 4th ticks:
var tickStart = 1;
var tickEnd = 3;
$(function () {
var rect = null;
function drawRect(chart){
if (rect){
rect.element.remove();
}
var xAxis = chart.xAxis[0];
var pixStart = xAxis.toPixels (xAxis.tickPositions[tickStart], false);
var pixEnd = xAxis.toPixels (xAxis.tickPositions[tickEnd], false);
rect = chart.renderer.rect(pixStart, chart.chartHeight - xAxis.bottom, pixEnd - pixStart , 25, 00)
.attr({
'stroke-width': 0,
stroke: '#888888',
fill: '#888888',
zIndex: 3
})
.add();
}
$('#container').highcharts({
chart: {
events: {
load: function() {
drawRect(this);
},
redraw: function(){
drawRect(this);
}
}
},
xAxis: {
},
series: [{
animation: false,
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
Fiddle here.
Did you try to use labels.formatter with background and useHTML flag? Something like this: http://jsfiddle.net/AeV7h/
xAxis: {
categories: ['Foo', 'Bar', 'Foobar'],
labels: {
useHTML: true,
formatter: function() {
return '<span class="hc-label">' + this.value + '</span>';
}
}
},
And CSS:
.hc-label {
background-color: red;
padding: 0px 5px;
color: yellow;
}
Related
Someone had a problem here: Highcharts.js - Event when any point is clicked_
They found a good solution. i have the same problem, but i have multiple y-series underneath. how can i detect which series was the correct one to be clicked?
example here:
// create the chart
Highcharts.chart('container', {
chart: {
type: 'line',
events: {
click: function (event) {
var label = this.renderer.label(
'x: ' + Highcharts.numberFormat(event.xAxis[0].value, 2) + ', y: ' + Highcharts.numberFormat(event.yAxis[0].value, 2),
event.xAxis[0].axis.toPixels(event.xAxis[0].value),
event.yAxis[0].axis.toPixels(event.yAxis[0].value)
)
.attr({
fill: Highcharts.getOptions().colors[0],
padding: 10,
r: 5,
zIndex: 8
})
.css({
color: '#FFFFFF'
})
.add();
setTimeout(function () {
label.fadeOut();
}, 1000);
}
}
},
yAxis: [{ min: 1, max: 3,
height: '40%'},{
height: '60%', top: '40%'}],
series: [{
yAxis: 0,
data: [2,2,2,2,2,2,2,2]
},
{
yAxis: 1,
data: [2.9, 3.5, 106.4, 129.2, 1.0, 4.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
You can find the proper yAxis by comparing min and max with event values. For example:
chart: {
events: {
click: function(event) {
const yAxis = event.yAxis.find(axis => (
axis.axis.max >= axis.value && axis.axis.min <= axis.value
));
if (!yAxis) {
return;
}
const label = this.renderer.label(
'x: ' + Highcharts.numberFormat(event.xAxis[0].value, 2) + ', y: ' + Highcharts.numberFormat(yAxis.value, 2),
event.xAxis[0].axis.toPixels(event.xAxis[0].value),
yAxis.axis.toPixels(yAxis.value)
)
.attr({
fill: Highcharts.getOptions().colors[0],
padding: 10,
r: 5,
zIndex: 8
})
.css({
color: '#FFFFFF'
})
.add();
setTimeout(function() {
label.fadeOut();
}, 1000);
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/yfq9t2jd/
API Reference: https://api.highcharts.com/highcharts/yAxis
I want to have x axis labelled before drilling down but as soon as a user drills down the x axis labels should not be visible anymore. How can I implement?
Is it safe to assume that you have an afterSetExtremes event, like so?
xAxis:{
labels: {
enabled: true
},
events:{
afterSetExtremes:afterSetExtremes
},
.....
If so, inside of that function you could do the following:
function afterSetExtremes(){
$('#container').highcharts().xAxis[0].update({
labels:{
enabled: false
}
});
}
Here you can run my example. Hope it helps!
Highcharts.chart('container', {
chart:{
zoomType: 'x'
},
title: {
text: 'Zoom in on chart to hide xAxis labels'
},
xAxis: {
labels: {
enabled: true
},
events:{
afterSetExtremes:afterSetExtremes
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
function afterSetExtremes(){
$('#container').highcharts().xAxis[0].update({
labels:{
enabled: false
}
});
}
#container {
height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Use drilldown and drillup events:
const setLabelsVisibility = (chart, isVisible) => {
chart.xAxis[0].update({
labels: {
enabled: isVisible
}
}, false);
};
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
drilldown: function() {
setLabelsVisibility(this, false)
},
drillup: function() {
setLabelsVisibility(this, true)
}
}
},
...
});
Live demo: https://jsfiddle.net/BlackLabel/vpxhum80/
API Reference: https://api.highcharts.com/highcharts/chart.events
There is an example here https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-point-events-click/ of alerting when a marker on the series is clicked.
Is there any way to alert when any x,y point on the chart is clicked?
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
alert('Category: ' + this.category + ', value: ' + this.y);
}
}
}
}
},
You need the click event from the chart object. https://api.highcharts.com/highcharts/chart.events.click
Highcharts.chart('container', {
chart: {
events: {
click: function (event) {
var label = this.renderer.label(
'x: ' + Highcharts.numberFormat(event.xAxis[0].value, 2) + ', y: ' + Highcharts.numberFormat(event.yAxis[0].value, 2),
event.xAxis[0].axis.toPixels(event.xAxis[0].value),
event.yAxis[0].axis.toPixels(event.yAxis[0].value)
)
.attr({
fill: Highcharts.getOptions().colors[0],
padding: 10,
r: 5,
zIndex: 8
})
.css({
color: '#FFFFFF'
})
.add();
setTimeout(function () {
label.fadeOut();
}, 1000);
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/chart/events-click/
I would like to be able to set the borders for the data labels of each slice of a pie chart independently. You can do this for each point in a column or line chart by entering it into the series data as shown, but I can't figure out how to make it work for the pie charts.
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 178.0, 135.6, 148.5, {
y: 216.4,
dataLabels: {
borderColor: 'red',
borderWidth: 2,
padding: 5,
shadow: true,
style: {
fontWeight: 'bold'
}
}
}, 194.1, 95.6, 54.4]
}]
Thanks
You can change the plotOptions.pie attributes like so:
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
borderWidth: 1,
borderColor: 'red',
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
See this fadizzle .
In this example JFiddle Link. I want to apply a colored area for a plotted/selected date period. For example, if I select points 1 to 10, the background of these points should be highlighted.
var $report = $('#report');
// create the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
events: {
selection: function(event) {
if (event.xAxis) {
var min = Math.ceil( event.xAxis[0].min ),
max = Math.ceil( event.xAxis[0].max ),
data = this.series[0].data,
list = [];
$('#report').empty();
for(i=min; i<max; i++)
list.push('<li>x: '+data[i].x+', y: '+data[i].y+'</li>');
$('#report').append( list.join('') );
}
return false;
}
},
zoomType: 'x'
},
xAxis: {
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
All you need to do is to add the PlotBand in your selection event.
chart.xAxis[0].removePlotBand('plot-band-1');
chart.xAxis[0].addPlotBand({
from: min,
to: max,
color: '#FCFFC5',
id: 'plot-band-1'
});
Example here. API for your reference.
Hope this helps.