I need to hide the last point in a serie but have to keep the label. Seems is only possible to set a pointWidth but not a pointHeight. How can i force to display the label and hide the column bar for the last point?
series: [
{
type: 'column',
data: [1, 2, 1, 2, 3, { pointWidth: 0, y: 5 }]
}
]
Here's a demo of the current/expected behavior
Thanks
You could set the color of the last column to transparent:
series: [{
data: [3,5,7,4,{y:5,color: 'transparent'}]
}]
Example:
http://jsfiddle.net/jlbriggs/7o2hafuy/
With dataLabels Api Doc that's possible
series: [{
type: 'column',
dataLabels:{
enabled:true
},
data: [1, 2, 1, 2, 3, {
pointWidth: 0,
y: 5
}]
}]
Fiddle
Related
When trying to configure a polar chart in highcharts 7.2.0 I am unable to configure the chart to always show labels on the xAxis. When the chart is not a polar chart then configuration property of xAxis.labels.styles.textOverflow = 'none' works correctly. The jsfiddle below shows that labels on the xAxis will automatically be removed if they collide with another label. I am looking to configure the polar chart to do the same thing as the line chart. When chart.polar: true is removed you can see the line chart with labels that overlap each other.
https://jsfiddle.net/y6xor7ac/3/
Highcharts.chart('container', {
chart: {
// comment this line to show line graph working correctly
polar: true
},
title: {
text: 'Highcharts Polar Chart'
},
subtitle: {
text: 'Also known as Radar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
overflow: 'allow',
labels: {
style: {
textOverflow: 'none'
},
format: '{value}° super long text to make it overlap super long text to make it overlap super long text to make it overlap '
}
},
yAxis: {
min: 0,
overflow: 'allow',
stackLabels: {
allowOverlap: true
}
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'column',
name: 'Column',
data: [8, 7, 6, 5, 4, 3, 2, 1],
pointPlacement: 'between'
}, {
type: 'line',
name: 'Line',
data: [1, 2, 3, 4, 5, 6, 7, 8]
}, {
type: 'area',
name: 'Area',
data: [1, 8, 2, 7, 3, 6, 4, 5]
}]
});
You can use internal allowOverlap property:
xAxis: {
...
labels: {
allowOverlap: true,
...
}
},
Live demo: https://jsfiddle.net/BlackLabel/1rkz9sfp/
API Reference: https://api.highcharts.com/highcharts/xAxis.labels
I am creating an arearange chart in Highcharts. Data to this chart is passed as an array of array like [[1,2,3],..]. Can i pass custom data in this point like [[1,2,3, "abc:12"],[5,6,7,"abc:14"]..].
If i want to pass custom data for each point, please let me know how to pass.
You can use keys property to map the values and for example use the custom value in a tooltip:
Highcharts.chart('container', {
series: [{
keys: ['x', 'low', 'high', 'customValue'],
type: 'arearange',
data: [
[1, 2, 3, "abc:12"],
[5, 6, 7, "abc:14"]
]
}],
tooltip: {
pointFormat: '{point.customValue}'
}
});
Live demo: http://jsfiddle.net/BlackLabel/ncmy1jt7/
API Reference: https://api.highcharts.com/highcharts/series.arearange.keys
Or define the series data as an array of objects:
series: [{
keys: ['x', 'low', 'high', 'customValue'],
type: 'arearange',
data: [{
x: 1,
low: 2,
high: 3,
customValue: "abc:12"
}, {
x: 5,
low: 6,
high: 7,
customValue: "abc:14"
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/s035q8um/
I have a simple HighStock chart with two series as shown in below image:
So functionality wise, HighChart decreases the width of the bar as soon as new series is added.
But I don't want to decrease the width of the bar, when there is data for only one series at specific point. (here date, 17. May)
Here is the Fiddle I have created. Try hiding one of the series and see width of the bar. The same width should be applied for the bar on "17. May" when both series are visible as there is data for only one series for that date. As shown below:
I have used below code:
Highcharts.stockChart('container', {
chart: {
alignTicks: false
},
legend: {
enabled: true
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Volume'
},
"series":[
{
"name":"Key Rate 319",
"type":"column",
"data":[{x: 1147651200000, y: 1}, {x: 1147737600000, y: 7}, {x: 1147824000000, y: 5}, {x: 1147910400000, y: 4}],
"marker":{"enabled":false},
"shadow":false,
"color":"blue"
},
{
"name":"Key Rate 321",
"type":"column",
"data":[{x: 1147651200000, y: 4}, {x: 1147737600000, y: 2}, {x: 1147824000000, y: null}, {x: 1147910400000, y: 1}],
"color":"green"
}]
});
How can I achieve this ?
Series has two properties for controlling the range and placement of points: pointRange & pointPlacement. They work for all series' points and unfortunately can't be applied to individual columns.
Workaround
Disable grouping and reset pointPadding & groupPadding:
plotOptions: {
series: {
grouping: false,
pointPadding: 0,
groupPadding: 0
}
},
Create a separate series for every point and apply appropriate pointRange & pointPadding to them. Then link them using linkedTo property to mimic the original series structure:
series: [{
name: 'First series',
color: '#bada55',
data: [
[0, 2]
],
pointRange: 0.4,
pointPlacement: -0.5
}, {
data: [
[1, 7]
],
linkedTo: ':previous',
color: '#bada55',
pointRange: 0.4,
pointPlacement: -0.5
}, {
data: [
[2, 5]
],
linkedTo: ':previous',
color: '#bada55',
//pointRange: 1, // by default
//pointPlacement: 0 // by default
}, {
data: [
[3, 4]
],
linkedTo: ':previous',
color: '#bada55',
pointRange: 0.4,
pointPlacement: -0.5
}, {
name: 'Second series',
data: [
[0, 1]
],
color: '#c0ffee',
pointRange: 0.4,
pointPlacement: 0.5
}, {
data: [
[1, 2]
],
linkedTo: ':previous',
color: '#c0ffee',
pointRange: 0.4,
pointPlacement: 0.5
}, {
data: [
[3, 2]
],
linkedTo: ':previous',
color: '#c0ffee',
pointRange: 0.4,
pointPlacement: 0.5
}]
Live demo: http://jsfiddle.net/BlackLabel/q7j4m8eb/
Disadvantage of this approach are that you must define color for each point (series) explicitly and the data structure look a bit complex.
All options mentioned above can be found in the API: https://api.highcharts.com/highcharts/
I have this issue, where I want a shared and custom-formatted tooltip on a Highcharts chart, but at the same time I want the crosshairs to work.
There is no issue on the x axis, but the on the y, it does not follow the pointer.
Any suggestions?
Highcharts.chart('container', {
chart: {
type: 'line'
},
xAxis: {
crosshair: true
},
yAxis: {
crosshair: true
},
series: [
{
data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
},
{
data: [1, 2, 3, 4, 5, 6, 7, 8, 9].reverse()
}
],
tooltip: {
shared: true
}
});
1st JSFiddle example
UPDATE:
Based on the comments given under this post, I've updated the issue.
Now, I have some compromise: I have two crosshairs on the y axis (or, exactly as many as many series item I have...)
The issue is, that if I link the axis options to the 0th option, the scale will be wrong. If I don't (and I don't have an example for that, but you can delete the line and run again), the two series will be at different scales, but since the second option is hidden, the whole think is just a mess.
And if I don't link the options to the 0th item, the crosshairs will not work again...
Any idea for this?
Highcharts.chart('container', {
chart: {
type: 'line'
},
xAxis: {
crosshair: true
},
yAxis: [
{
crosshair: true
},
{
linkedTo: 0, // delete me and run again
crosshair: true,
visible: false
}
],
series: [
{
yAxis: 0,
data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
},
{
yAxis: 1,
data: [1, 2, 3, 4, 5, 6, 7, 8, 9].reverse().map(value => value - 5)
}
],
tooltip: {
shared: true
}
});
2nd JSFiddle example
If I am thinking correctly,your worry is about the negative value.So for the negative value you can assign min value to yAxis in charts
check Fiddle demo
yAxis: [
{
crosshair: true,
min:-10,
},
{
linkedTo: 0, // delete me and run again
crosshair: true,
visible: false
}
],
As the title states, highcharts is only loading the title and subtitle, yet none of the subsequent chart information or it's relevant theme. Hitting my head against a wall trying to get this to work. Really hoping someone else here has had this problem.
jsfidizzle
The first half of the fiddle is the highcharts theme. All the logic starts kicking off at #transitfunding
Very simple fix... you need to move your series data outside of your plotOptions: like so:
plotOptions: {
column: {
stacking: 'normal'
},
},
series: [{
name: 'Other',
data: [0, 0, -5400000, 1, 1, 0, 3, 0, 8016805, -8435419, -28900000]
}, {
name: 'Gas Tax',
data: [119221, 627705, 234646, 6685080, 1341871, 1990937, 3187208, 6911715, 10002605, -14282137, -10555715 ]
}]
A working fiddle can be seen here.
you have misplace the series section.
series(that contains data) is the sibling of plotOptions not its child.
so it should be like
plotOptions: {
column: {
stacking: 'normal'
},
},
series: [{
name: 'Other',
data: [0, 0, -5400000, 1, 1, 0, 3, 0, 8016805, -8435419, -28900000]
}, {
name: 'Gas Tax',
data: [119221, 627705, 234646, 6685080, 1341871, 1990937, 3187208, 6911715, 10002605, -14282137, -10555715 ]
}]
I've updated your js fiddle here