I am using highstock charts for stock charts. In my charts i have a buttons like 1D,5D, 6M, 3YR, 10YR and YTD.
When i resize the chart (ipad portrait mode), 3yr,10yr and YTD buttons are coming out of the chart.
there is no enough room for buttons in chart.So i need to disable few buttons and show only 1D,5D and YTD buttons in chart.
on desktop mode:
On ipad portrait mode:
Can you suggest me how to do this?
Thanks in Advance.
To disable the range selector, you can use this code:
rangeSelector: {
enabled: false
}
and to modify it's buttons, you can use this code;
rangeSelector: {
buttons: [{
type: 'day',
count: 3,
text: '3d'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 3
}
Maybe less number of buttons can resolve your issue.
I think you can use CSS to hide some of buttons, see: http://jsfiddle.net/wcqP9/
.highcharts-button {
display: none;
}
Related
Looking to work with the below chart, but cannot get to change the title color to white and the axis and axis numbers to grey (or white). This should go above a dark background. Does anybody knows how to change the title color with echarts ?
<script type="text/javascript">
// based on prepared DOM, initialize echarts instance
var myChart = echarts.init(document.getElementById('main'));
// specify chart configuration item and data
var option = {
title: {
text: 'Total memebers of the club',
fontColor: 'white',
display: true,
position: 'bottom'
},
tooltip: {},
legend: {
data: ['Total member']
},
xAxis: {
data: ["11/2018", "12/2018", "01/2019", "02/2019", "03/2019", "04/2019"]
},
yAxis: {},
series: [{
itemStyle: {normal: {color: 'white'}},
name: 'Total',
type: 'bar',
data: [5, 384, 612, 2344, 4670, 9372]
}]
};
// use configuration item and data specified to show chart
myChart.setOption(option);
</script>
Give this a try. Add it under 'text:' like:
text: 'Total memebers of the club',
textStyle: {
color: '#ed2d2e'
}
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 an issue where I want to change the fill color of a column series when hovering another series. (This is to visualize related series)
I succeeded in changing the color on mouseOver, but I'm not able to restore the color on mouseOut.
The code I have until now is on jsFiddle
var hoverSerie;
var originalColor;
var newColor = '#a760d6'
$(function () {
var t = $('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series:[{
events: {
mouseOver: function() {
hoverSeries = this.chart.series[2]
originalColor = hoverSeries.options.color;
hoverSeries.options.color = newColor;
hoverSeries.update(hoverSeries.options);
},
mouseOut: function(){
if(originalColor)
{
hoverSeries.options.color = originalColor;
hoverSeries.update();
}
}
},
animation : false,
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
animation : false,
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
animation : false,
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});
When hovering (mouseOver) the top stacked series (light blue) the color of the bottom (black) series. For one or other reason, the mouse out event is working differently as the mousOver event. The code appears to loop when doing a mouseOut.
Apparently when doing update inside mouseOut the redraw-part of the update causes mouseOut to be called recursively, eventually leading to "stack size exceeded". In this updated Fiddle I've used a boolean to prevent it from happening recursively, which seems to be working for me in Chrome. Hope it it what you were looking for. The only real change is the addition of the mouseWasOver variable used in both mouseOver and mouseOut.
This appears to be a bug(?) related to calling update inside mouseOut that was reported as early as 2011 on their GitHub, and 2010 on their forum.
I am using highstock chart for displaying the stock chart.when charts gets loaded by default i am showing 6M button selected.
rangeSelector: {
buttons: [{
type: 'day',
count: 1,
text: '1min'
}, {
type: 'day',
count: 5,
text: '10min'
}, {
type: 'month',
count: 6,
text: '6M'
},
{
type: 'year',
count: 3,
text: '3yr'
}, {
type: 'year',
count: 10,
text: '10yr'
}
],
inputEnabled: false,
selected: 2
},
The chart contains lot of data points.So when i tap to another spot on the series, the time period above loses the "boldness". Hence i no longer know what was the time period i had selected.
If the chart contains only 3 buttons then its working fine. If more buttons then the button is disable.
Can you tell me how to enable the selected button always when i tap on series of highstock chart?
Thanks in Advance.
I opened this example http://www.highcharts.com/stock/demo/basic-line/gray and click on the buttons, and bold doesn't disappear. Which version of HS do you use? Could you prepare your example as live demo?
I want to know how to determine which rangeSelector button is selected in highstock.
my rangeSelector buttons:
buttons: [{
type: 'month',
count: 1,
text: '1 MONTH',
}, {
type: 'month',
count: 3,
text: '3 MONTH'
}, {
type: 'month',
count: 6,
text: '6 MONTH'
}, {
type: 'ytd',
text: 'YTD'
}, {
type: 'year',
count: 1,
text: '1 YEAR'
}, {
type: 'all',
text: 'ALL'
}],
for example I click on my first rangeSelector that is 1 MONTH. I want to know if this button is selected or not.
Is there any event?
Thanks
You can catch setExtremes() (http://api.highcharts.com/highstock#xAxis.events.setExtremes), and then in event obejct you have access to event.rangeSelectorButton object with count, text and type property.
xAxis: {
events: {
setExtremes: function(e) {
console.log(this);
if(typeof(e.rangeSelectorButton)!== 'undefined')
{
alert('count: '+e.rangeSelectorButton.count + 'text: ' +e.rangeSelectorButton.text + ' type:' + e.rangeSelectorButton.type);
}
}
}
},
http://jsfiddle.net/E6GHC/1/
You can get the a lot of information about the selected button directly from the rangeSelector.
For example:
var chart = $('#container').highcharts();
var selected = chart.rangeSelector.selected; // Index of selected button
var text = chart.rangeSelector.buttonOptions[selected].text; // Text of selected button
var type = chart.rangeSelector.buttonOptions[selected].type; // Type of selected button
And some other random information in buttonOptions and buttons under rangeSelector, using the selected index.
See this JSFiddle demonstration to see it in action.