I am using Highstock-1.2.4 along with jQuery in my application. In one of the dialog I highstocks stacked column.
My issue is, if there are graph with large y-axis value (eg. 200
unit) along with a graph with small y-axis value (eg. 1 unit), then tooltip for the small graphs are not displayed properly.
For better understanding I have provided example.
In the above example "jan" has very small graph.If u hover over it (i.e jan) u get tooltip for series '3' and '4' which is expected one. Now if you resize the graph (using resize handler present at right corner) to reduce the graph width and then hover over small graph at "jan" youu get tooltip only for series 4 (which is 0).
Please some one guide how to handle this kind of issues.
Sample Code:
<script type="text/javascript" src="http://highcharts.com/js/testing.js"></script>
<div id="resizer" style="min-width: 350px; min-height: 200px">
<div id="inner-resizer">
<div id="container" style="height: 300px">
</div>
</div>
</div>
var container = $('#container')[0];
$('#resizer').resizable({
resize: function() {
chart.setSize(
this.offsetWidth - 20,
this.offsetHeight - 20,
false
);
}
});
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
zoomType:'xy'
},
credits: {
enabled: false
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
data: [0, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [0,176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
},
{
data: [5, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [0,176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
}]
});
I think its not tool tip issue, when you re size the graph to very small size, one can not judge mouse over so perfectly than regular size.
Even, in the regular size if you over the graph shows tooltip for other series later.
What I can suggest here is try
tooltip:{
shared:true
}
Link: http://jsfiddle.net/mhardik/yPLjR/623/
With this you can get tooltip even with lower size.
EDIT:
Set
plotOptions: {
series: {
stacking: 'percent'
}
}
which will set column height relative to percent. So, you will get bar even for very low values.
Related
Expected behaviour:
bar / point width should
be always same even after showing and hiding a series
Actual behaviour:
bars width is not same, middle bar is squeezed.
Live demo with steps to reproduce:
access the below fiddle and click on series 2 on legend(enabling), observe width of bars, middle bar's width is not same as others. I think highcharts is trying to fit the bars within the available chart width. how can I make sure bars are having equal width without space between them. I have tried with the below options
pointPadding: 0,
borderWidth: 0,
shadow: false,
pointWidth: 10,
https://jsfiddle.net/rammohanreddy201/mugp32hy/5/
`
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
pointPadding: 0,
borderWidth: 0,
shadow: false,
pointWidth: 10,
states: {
inactive: {
opacity: 1
},
hover: {
enabled: false
}
}
}
},
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]
},
{
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],
visible: 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]
}]
});
`
Product version
7.x
Affected browser(s)
tried with chrome, but is not dependent on browser type
The columns have the same width, they just overlap. If you want to show entire columns, make more space for them, for example by setting groupPadding to 0.
plotOptions: {
series: {
pointPadding: 0,
groupPadding: 0,
pointWidth: 10,
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/knm5xvtd/
API Reference: https://api.highcharts.com/highcharts/plotOptions.column.groupPadding
I am facing problem in removing yaxis in highcharts(highstock). I have the below snippet to explain the issue in a better way.
My chart loads with 3 initial yAxis and then I try to add or delete yAxis dynamically on the fly. For some reason its not removing the appropriate yaxis but removes series from another yAxis.
To reproduce the issue try to execute the following steps -
Click on "Add yAxis" button
Enter 1 in the text field and click on "delete yAxis" button
Click on "delete yAxis" button again
Click on add yAxis to add another axis
Click again on add yAxis to add another axis
Enter 2 in the text field and click on "delete yAxis" button
You will observe the yAxis we tried to remove got removed but it also removed the series from the last yAxis we added.
var chart;
$(function () {
var index = 0;
var data1 = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];
var highchartOptions = {
chart:{
renderTo:'container'
},
navigator: {
outlineColor: '#0066DD',
outlineWidth: 1
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis:[{
title:{
text:"initial data"
},
id:'myaxis-'+ index++,
height:'14%',
top:'0%'
},
{
title:{
text:"initial data"
},
id:'myaxis-'+ index++,
top:'15%',
height:'14%'
},
{
title:{
text:"initial data"
},
id:'myaxis-'+ index++,
top:'30%',
height:'14%'
}],
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]
},
{
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],
yAxis:1
},
{
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],
yAxis:2
}]
};
chart = new Highcharts.StockChart(highchartOptions);
$button = $('#button');
$delButton = $('#delbutton');
var axisCount = 4; // axisCount is 4 because the chart is loaded with 3 axis + 1 for the navigator
$button.click(function () {
var axisObj = {
title: {
text: "axis-" + axisCount,
id:'myaxis-'+ (index++)
},
};
chart.addAxis(axisObj, false);
var seriesData = new Object();
seriesData.name = 'axis-' + axisCount;
seriesData.yAxis = axisCount;
seriesData.data = data1;
seriesData.type = 'line';
chart.addSeries(seriesData);
chart.yAxis[axisCount].update({ height: '14%',top: (axisCount*15) + '%',offset:0 });
axisCount++;
});
$delButton.click(function () {
var delAxis = $('#delAxis').val();
chart.yAxis[delAxis].remove();
for(var i=delAxis;i<axisCount-1; i++){
chart.yAxis[i].update({ height: '14%',top: (i*15) + '%',offset:0 });
}
axisCount--;
});
});
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<button id="button" class="autocompare">Add yAxis</button><br>
Entrt yAxis index to delete:<input type='text' id="delAxis"/>
<button id="delbutton" class="autocompare">Delete yAxis</button>
<div id="container" style="height: 800px"></div>
I made a jsfiddle example to demo this.
http://jsfiddle.net/daxu/ttxvpduv/.
$(function () {
$('#container').highcharts({
legend: {
enabled: true
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
name:'a',
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]
},
{
name:'b',
type:'area',
data: [129.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
In my example, I have two series (one line, one area). We can see that the legend for line chart is a line, and the legend area is bigger (like an area).
Is there a way to make all legends a line or some style?
Many Thanks
This is a little hacky (maybe I've just been using d3.js too much lately) but you could modify the SVG on the fly:
, function(chart){
// remove the line and rect
$('.highcharts-legend-item path, .highcharts-legend-item rect').remove();
// add in your own elements
$('.highcharts-legend-item').each(function(i, obj){
var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
$(circle).attr({"r":10,"fill":"red", "cy": 10});
$(obj).append(circle);
});
});
Fiddle here.
worked out this now.
see http://jsfiddle.net/ttxvpduv/2/
Highcharts.seriesTypes.line.prototype.drawLegendSymbol =
Highcharts.seriesTypes.column.prototype.drawLegendSymbol;
I am using highcharts and I have a column chart which has 2 data series', the first has each point with different coloured bars, the second series has all the same colour bars.
I understand that because I have set colorbypoint to true that its going to remove the colour swatch from the legend, but is there not a way to add one back in for the second series which is all 1 colour??
I have tried setting various options from the api including trying to add the colorbypoint to just the coloured series but that does not get applied. I have also tried to set colorbypoint to false on the plain series but that does not get applied either.
Is this even possible?
here is a link to a fiddle
http://jsfiddle.net/wf_4/X4K4R/
Just set colorByPoint: false for a second series, and set one color instead of colors array. See demo: http://jsfiddle.net/X4K4R/1/
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
colorByPoint: true
}
},
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]
}, {
colorByPoint: false,
data: [54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6],
color: '#000000'
}]
});
I want to register a click event with a point on a scatter series. This works when there are no other series displayed on the chart. However, when a line series is displayed i cannot get the click to occur on the scatter series. It only registers on the line series. This happens no matter what order i add the series to the chart. How can i register a click event on a scatter point in this case?
I have an example of the issue here: http://jsfiddle.net/scottmlaplante/AfNzC/1/
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
navigator:{
baseSeries:1
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function(event) {
alert ('Category: '+ this.category +', value: '+ this.y + event.point.series.name);
}
}
}
}
},
series: [
{
type: "scatter",
name: "scatter 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]
},
{
type: "line",
name:"line 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]
}]
});
You can recognise which series point is clickec by checking index of series.
if(this.series.index==1)
alert('scatter');
else
alert('line')
http://jsfiddle.net/scottmlaplante/AfNzC/1/