I've tried to add multiple series to different X-Axis on a column chart. My problem is, that Highcharts reserve space for each column series, but in my case the series are uniqe to one X-Axis and they are not overlapping. So I don't want to reserve space for columns that are never appear in the group.
Here is an example: https://jsfiddle.net/Kanatorabo/qs0vuehk/
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Columns centered in category'
},
subtitle: {
text: 'Null or missing points are ignored'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
gridLineWidth: 1,
offset: 0,
left: "20%",
width: "80%",
}, {
categories: ['2018', '2019', '2020'],
gridLineWidth: 1,
offset: 0,
width: "20%",
}],
plotOptions: {
series: {
centerInCategory: true,
//pointPadding: 0,
},
/*column: {
grouping: false,
shadow: false,
pointPadding: 0.2,
}*/
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, null, null, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
name: "data1",
}, {
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2],
name: "data2",
}, {
data: [71.5, 106.4, 129.2, null, null, 135.6, 148.5, null, 194.1, 95.6, 54.4, 29.9],
name: "data3",
}, {
data: [null, 70.5, 99.4],
colorIndex: 0,
name: "data1 preVal",
linkedTo: 0,
xAxis: 1,
}, {
data: [null, 60.5, 89.4],
name: "data2 preVal",
colorIndex: 1,
linkedTo: 1,
xAxis: 1,
}, {
data: [null, 80.5, 69.4],
colorIndex: 2,
name: "data3 preVal",
linkedTo: 2,
xAxis: 1,
}]
});
In 2019/2020 and Feb/Mar there is a reserved space for 6 columns and the width of all columns is calculated as if 6 columns exists.
Thank you in advance
It looks like a bug, I reported it on the Highcharts Github issue channel where you can follow this thread: https://github.com/highcharts/highcharts/issues/15503
Related
If you see the example below, when you hover on the points, the tooltip will be to the left of the point, except when you hover on the month of 'June', where there is only a single value.
Im trying to get the tooltip to show in the same position when i hover on a point with multiple values on a single point, and also when i hover on a point with just 1 value available. (this is a shared tooltip).
Any idea how i can make the single value tooltip behave the same way as the others?
http://jsfiddle.net/2paj7L0h/ or snippet below:
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
connectNulls: true
}
},
tooltip: {
shared: true,
crosshairs: 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]
}, {
data: [216.4, 194.1, 95.6, 54.4, 29.9, null, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
As I have mentioned in my comment, you should be able to use tooltip.positioner for positioning your tooltip near your points:
http://api.highcharts.com/highcharts/tooltip.positioner
tooltip: {
shared: true,
crosshairs: true,
positioner: function(labelWidth, labelHeight, point) {
var x;
if (point.plotX - labelWidth / 2 > 0) {
x = point.plotX - labelWidth / 2;
} else {
x = 0
}
return {
x: x,
y: point.plotY
}
},
shape: 'square'
},
Live example: http://jsfiddle.net/2paj7L0h/2/
That's because you put a null value in the month of June of the second data array, if you put the correct value, the month will match correctly
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
connectNulls: true
}
},
tooltip: {
shared: true,
crosshairs: 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]
}, {
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]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
I have a highchart with a couple of line series and a scatter plot and I have set the shared tooltip property to true as in this fiddle http://jsfiddle.net/tpo4caoz/. I see that the line series are having a shared tool tip but the scatter plot is having a separate tooltip for itself.
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
tooltip: {
shared: 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],
type: 'scatter'
}, {
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]
},{
data: [210.4, 190.1, 90.6, 50.4, 20.9, 70.5, 105.4, 120.2, 140.0, 170.0, 130.6, 140.5]
}]
});
});
Am I missing something here ?
you could try this
http://jsfiddle.net/8qt0d4h0/
The new highcharts can not shared tooltip in pie/scatter/flag,
so you could handle the scatter as spline , and set the lineWidth equal and set states hover equal 0 too.
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
tooltip: {
shared: 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],
type: 'spline',
"lineWidth": 0,
"marker": {
"enabled": "true",
"states": {
"hover": {
"enabled": "true"
}
},
"radius": 5
},
"states": {
"hover": {
"lineWidthPlus": 0
}
},
}, {
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]
},{
data: [210.4, 190.1, 90.6, 50.4, 20.9, 70.5, 105.4, 120.2, 140.0, 170.0, 130.6, 140.5]
}]
});
});
This is the existing issue in Highcharts issue tracker
Part of the issue is that shared tooltip shouldn't work on scatter
series at all, because they are not sorted and laid out in increasing
X order. This should be noted in the docs(link).
According highcharts api http://api.highcharts.com/highcharts#tooltip.shared tooltip shared works only for ordered data and not for pie, scatter, flags etc.
Add this line of code:
Highcharts.seriesTypes.scatter.prototype.noSharedTooltip = false;
It disables Hicharts default setting which disables scatter plots from being included in shared/split tooltips. This way you do not have to use spline like others suggest, which cant lead to problems such as tooltip following the spline line.
The bar chart demo is here,
jsfiddle
I want to increase the width between different bars, What configuration should I set ? please give me some advice. thks!
To increase width between two bar in highcharts.js you can use groupPadding,
API: http://api.highcharts.com/highcharts#plotOptions.bar.groupPadding
Example: http://jsfiddle.net/6j3y54na/2/
groupPadding: 0.2
If you want to increase gap between bars in same group then you can use pointPadding
API: http://api.highcharts.com/highcharts#plotOptions.bar.pointPadding
Use pointWidth property, a pixel value specifying a fixed width for each column or bar:
plotOptions: {
series: {
stacking: 'percent',
pointWidth: 5
}
},
JSFiddle
pointWidth is the parameter to set the width for bar width .Refer this jsFiddle
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
marginLeft: 50,
marginBottom: 90
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
stacking: 'percent', pointWidth: 4
}
},
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: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
}]
});
});
I am using jqplot for making pie chart.. In this i want to create a pie chart like following image..
It is Possible to do that?? using jqplot
I couldn't find a solution for jqPlot, but used highcharts instead. You can check the demo
code:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Pattern fill plugin demo'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
plotBands: [{
from: 100,
to: 200,
color: {
pattern: 'https://rawgithub.com/highslide-software/pattern-fill/master/graphics/pattern3.png',
width: 6,
height: 6
}
}]
},
series: [{
type: 'area',
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],
fillColor: {
pattern: 'https://rawgithub.com/highslide-software/pattern-fill/master/graphics/pattern1.png',
width: 6,
height: 6
}
}, {
type: 'column',
data: [148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6],
color: {
pattern: 'https://rawgithub.com/highslide-software/pattern-fill/master/graphics/pattern2.png',
width: 6,
height: 6,
// VML only:
color1: 'red',
color2: 'yellow'
}
}]
});
I've tried lots of combinations in the legend options of the highcharts object, however I was not able to successfully realize the exact design that the designer made.
What I need is to be able to have a legend that looks exactly like this...
Wanted legend layout
But the closest result that I achieved with the legend options available was this...
The closest legend layout I could achieve
The properties I used within the highchart object definition were:
legend: {
enabled: graphProperties.legend.enabled,
backgroundColor: ...
borderRadius: ...
verticalAlign: ...
align: ...
borderWidth: ...
x: ...
y: ... }
Thank you in advance for any help.
Maybe you can use this as a starting point.
http://jsfiddle.net/DqAqu/4/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
backgroundColor: '#F5F5F5',
plotBackgroundColor: '#FFFFFF'
},
symbols: [ 'square', 'square' ],
legend: {
backgroundColor: '#F5F5F5',
layout: 'horizontal',
floating: true,
align: 'left',
verticalAlign: 'top',
x: 60,
y: 1,
shadow: false,
border: 0,
borderRadius: 0,
borderWidth: 0
},
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],
color: '#47D147'
}, {
data: [95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1],
color: '#19A3FF'
}]
});
});