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
}
],
Related
below is my code for the stacked bar chart, It sets the values Y-axis wise instead of X-axis wise, data [5,3] should be shown in x-axis in one row and [2,2] in another x-axis point, but plotting [5,3] and [2,2]
function barChartObject() {
return jQuery.extend(true, {}, Highcharts.setOptions({
chart: {
type: 'bar',
marginTop: 10,
marginBottom: 10,
marginLeft: 50,
marginRight: 2,
width: 500
},
xAxis: {
categories: ['Apples', 'Bananas']
},
yAxis: {
min: 0,
},
legend: {
reversed: true
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
},
series: {
stacking: 'normal'
}
}
}));
}
function addBarSeries(chart, chartData) {
_.each(chart.series, function(s) {
s.remove();
});
chart.options.legend.enabled = false;
var series = [{
name: 'John',
data: [5, 3]
}, {
name: 'Jane',
data: [2, 2]
}];
_.each(series, function(s) {
chart.addSeries(s, false);
});
chart.redraw();
}
data [5,3] should be shown in x-axis in
one row and [2,2] in another x-axis point, but plotting [5,3] and
[2,2]
Nope, it renders as it should be. Notice that your series has defined two points, like [{x: 0, y: 2}, {x: 1, y: 2}], which are clearly visible on the chart.
If you want to have those two values in one row of the xAxis, you will need to change your data into this format:
series: [{
name: 'John',
data: [2, 3]
}, {
name: 'Jane',
data: [2, 5]
}]
Demo: https://jsfiddle.net/BlackLabel/2d3u157o/
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 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
Is there is a way to round off the area points and make them less pointed when used in the polar chart?
I have tried the 'areaspline', but with polar chart it's not quite right, as you can see here:
http://jsfiddle.net/qwbu6r3t/2/
Highcharts.chart('container', {
chart: {
polar: true
},
title: {
text: 'Highcharts Polar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
formatter: function () {
return this.value + '°';
}
}
},
yAxis: {
min: 0
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
}
},
series: [{
type: 'areaspline',
name: 'Area spline',
data: [1, 2, 3, 4, 5, 6, 7, 8]
}, {
type: 'area',
name: 'Area',
data: [1, 8, 2, 7, 3, 6, 4, 5]
}]
});
EDIT
What I need
You can override highcharts Highcharts.seriesTypes.areaSpline.prototype.getPointSpline with same method but with changed smoothing parameter. (Default 1.5)
...
var smoothing = 3, // 1 means control points midway between points, 2 means 1/3 from the point, 3 is 1/4 etc
...
Live example:
http://jsfiddle.net/q3h6xwog/
just change area to areaspline would do what you want i think so
I want to add yAxis dynamically.
chart.addAxis({
id: serie.options.id,
title: {
text: serie.name
},
lineWidth: 2,
lineColor: serie.color,
opposite: false,
});
the code above, adds only line. I need to add measure too. How can i add specific measure for a serie?
For new axis to show measure (AKA scale and labels) you need to set this axis as an yAxis for a series or link this new axis to an existing one, that is showing labels.
$(function() {
$('#container').highcharts({
series: [{
data: [1, 2, 3, 4, 5, 6, 7]
}]
}, function(chart) {
chart.addAxis({
id: 'serie.options.id',
title: {
text: 'serie.name'
},
lineWidth: 2,
//lineColor: serie.color,
opposite: false,
//linkedTo: 0
});
chart.addSeries({
data: [42,2,4,0],
yAxis: 1
});
});
});
Example with:
linkedTo: http://jsfiddle.net/u90dLbc6/1/
assigned series: http://jsfiddle.net/u90dLbc6/0/