How to display highlighted graph's x-axis values only , on bar graph in
high chart?I have 6 graphs plotted, need to highlight selected graphs x-axis values only.
xAxis: {
categories: userArr,
title: {
text: 'Users'
},
},
You may do so by using formatter function in datalabel (See Fiddle here)
dataLabels: {
formatter: function(){
return this.point.name
},
enabled: true
}
Related
Using Highstock, I wish to draw a candlestick chart over a line chart.
I know it sounds weird, but I need to rotate the candlestick chart by 90 degrees clockwise.
The code I have now is:
Highcharts.getJSON('https://cdn.jsdelivr.net/gh/highcharts/highcharts#v7.0.0/samples/data/new-intraday.json', function (data) {
// create the chart
Highcharts.stockChart('container', {
title: {
text: 'AAPL stock price by minute'
},
navigator: {
enabled: false
},
rangeSelector: {
enabled: false
},
series: [{
name: 'AAPL',
type: 'candlestick',
data: data,
tooltip: {
valueDecimals: 2
}
},{
name: 'TEST',
type: 'line',
data: data
}]
});
});
JSFiddle here
What I want to get is the following (something like...):
Any (simple) idea?
Highstock is not adapted to this kind of customization. The only simple way seems to be creating two overlapping charts - one inverted and one with transparent background, but we have to take into account many limitations, like for example tooltip.
chart: {
inverted: true,
...
}
Live demo: https://jsfiddle.net/BlackLabel/nb1jyaq5/
API Reference: https://api.highcharts.com/highcharts/chart.inverted
How do I get HighCharts not to overlap columns in this chart? I have tried all sorts of options. What I would like is for highcharts to set the widths evenly depending on the number data elements in the series, the more the narrower.'
I have specified width: 300 to force the columns to overlap just to show what is happening in narrow chart and only add a few data elements.
$(function() {
Highcharts.chart('container', {
chart: {
type: 'column',
width: 300,
zoomType: 'x'
},
legend: {
enabled: false
},
series: [{
data: [
[102.0, 66815.0],
[96.0, 77760.0],
[90.0, 68710.0],
[84.0, 69452.5],
[78.0, 48807.5],
[72.0, 35472.5],
[66.0, 24595.0],
[60.0, 17790.0],
[54.0, 18010.0],
[48.0, 5635.0]
]
}]
});
});
http://jsfiddle.net/a0kjogh1/3/
Data should be sorted before you put it into the chart. You receive the error in the console.
data.sort((a, b) => {
return a[0] > b[0];
});
example: http://jsfiddle.net/a0kjogh1/4/
I am trying to change the sliced point colour on pie chart. When it is drilled down, the colour couldn't be changed using the select function on the slice. The colour is always changed back to the colour of its parent slice.
For example, when a green slice is clicked on the parent chart to drill down, whatever slice clicked on the child chart will change to green, even though I tried to change it to yellow in the select event which is set in plotOptions. But unselecting it will change the colour to yellow, by clicking another slice.
It seems like a bug to me.
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Browser market shares. November, 2013.'
},
subtitle: {
text: 'Click the slices to view versions. Source: netmarketshare.com.'
},
plotOptions: {
series: {
allowPointSelect: true,
point: {
events: {
select: function() {
this.update({color: 'yellow'});
}
}
},
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Brands',
colorByPoint: true,
data: brandsData
}],
drilldown: {
series: drilldownSeries
}
});
Here is the fiddle.
In the current version of the Highcharts (Highcharts Basic v7.2.1) everything is working properly.
I'm a bit late on this one, but this is a known issue of Highcharts. Instead of using the select event, use the selected and unselected events. There is a subtle difference here, as using select will often not fire directly after a click. These two events however are more reliable.
https://api.highcharts.com/highcharts/plotOptions.pie.point.events.select
https://api.highcharts.com/highcharts/plotOptions.pie.point.events.unselect
I have found this jsfiddle very helpful when I started working on paginated highchart columns. On top of this good example, I would like to know how I could change the x-axis labels into each data's corresponding name. (Ex. Along the x-axis, we should find the names of 'Fred G. Aandahl', 'Watkins Moorman Abbitt', 'Amos Abbott', etc. with their corresponding y-values and must change accordingly when the "Next" button is clicked.)
I have tried adding "xAxis" option inside the highcharts portion but still had no luck.
pie = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
labels: {
formatter: function(){
return this.value;
}
}
},
series: [{
data: []
}]
});
and
pie = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
labels: {
format: '{value}'
}
},
series: [{
data: []
}]
});
Can someone help me regarding on what I am missing in this example? It will be very much appreciated.
You can set type of xAxis to category and without category array the value in axis will be taken from the point. But you will need to change your setData call to
pie.series[0].setData( data.slice(from, to), true, true, false );
xAxis: {
type: 'category'
},
Example: http://jsfiddle.net/kpxp4/8/
I am able to change the x-axis labels accordingly by adding
pie.xAxis[0].update({
categories: category.slice(from, to)
})
after the setData call, where category is an array of all the x-axis labels that you want to display in correspondence to each y-axis value. Moreover, the
xAxis: {
type: 'category'
}
portion, as suggested by #Kacper Madej, works for the specific data format given originally. However, the pie.xAxis[0].update() could be used on a more general sense given that you know the array of x-axis labels that you want to use (regardless of the data or series format that you have).
Here is the link to the jsfiddle.
Hope this could be of any help, too.
Take a look at this jsfiddle:
http://jsfiddle.net/P8hrN/
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create the chart
$('#container').highcharts('StockChart', {
yAxis: [{
lineWidth: 1,
opposite: true
}],
rangeSelector : {
selected : 1,
inputEnabled: $('#container').width() > 480
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
I use "opposite: true" to display the y-axis on the right. But I want also the labels (numbers) to be on the right of the axis, not inside the series area.
At the moment, the numbers are on the left, so the series touches the "450" label.
Any ideas?
You need to set align:'left', so anchor-point for label will be on a left side. See demo and docs.