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;
Related
I am. trying to hide a portion of a series. I am using zone to do that, but somehow the visbile: false property doesn't work inside a zone. Is there any better way of doing that?
E.g., I am trying to hide the dotted part in the below exmpale:
https://jsfiddle.net/abdfahim/7849x56y/9/
Define the custom class for the zones and hide all the lines and points.
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
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: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5],
zoneAxis: 'x',
zones: [{
value: 3,
dashStyle: 'solid',
className: 'zone-0'
}, {
value: 5,
className: 'zone-1'
}, {
dashStyle: 'solid',
className: 'zone-2'
}]
}]
});
.highcharts-graph.zone-1 {
display: none;
}
.highcharts-area.zone-1 {
display: none;
}
.highcharts-point.zone-1 {
display: none;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
API Reference: https://api.highcharts.com/highstock/plotOptions.series.zones
I have 2 series on my graph:
column (histogram)
line
My problem is that some values of my line series are hidden by the column series (the histogram cuts off line graph whenever there is a merge of the two graphs).
How could I be sure line graph is on the forefront?
Use the z-index attribute:
example:
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
lineWidth: 5
}
},
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: 'column',
color: 'blue',
zIndex: 1
}, {
data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5],
color: 'yellow',
zIndex: 2
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
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/
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.