Share tooltip between all series types - javascript

Working with tooltips in Highcharts I can see that not all type of series are included in the same tooltip. In the definition of my Highcharts object the property of tooltip look like:
tooltip: {
positioner : function (boxWidth, boxHeight, point) {
return {
x : point.plotX - 100,
y : point.plotY
};
},
shared : true
}
And how I am setting the tooltip property for each series is:
public getDefaultTooltip() {
return {
pointFormat : '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y} </b><br/>'
};
}
After read the documentation of tooltip I can see that shared property is not valid for series of type 'scatter', what is exactly the type of series that is not working for me. So, is there some workaround in order to make available all the data in the same shared tooltip?
in the example bellow I want to show all the series data in the same tooltip but the scatter serie is using a different popover. http://jsfiddle.net/rolandomartinezg/a6c4c4tv/1/

The ScatterSeries is defined in highcharts with noSharedTooltip = true. I think this is because the scatter series show both the x and y in their tooltips.
var ScatterSeries = extendClass(Series, {
type: 'scatter',
sorted: false,
requireSorting: false,
noSharedTooltip: true,
trackerGroups: ['group', 'markerGroup', 'dataLabelsGroup'],
takeOrdinalPosition: false, // #2342
kdDimensions: 2,
kdComparer: 'distR',
drawGraph: function () {
if (this.options.lineWidth) {
Series.prototype.drawGraph.call(this);
}
}
});
To get around this, you can use a line series instead of the scatter series with the lineWidth = 0. You also need to turn off the hover state for the series to avoid the line showing up on hover.
, {
type: 'line',
name: 'Average',
lineWidth: 0,
states: {
hover: {
enabled: false
}
},
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}
http://jsfiddle.net/a6c4c4tv/2/

Related

How to add inline legends to line / area mixed chart in highchart

I have a chart which has part line and part area stacked. In the first part (area) I want to add an inline legend as it is shown in this example (ie where it says Asia)
https://www.highcharts.com/demo/area-stacked-percent
These are the example options but I do not see how to specify that or if this is the default way to show legends in this plot
In my example, I cannot put the legends inside the area part. Tried to add title in yAxis. I also tried to add an annotation but it did not work:
https://jsfiddle.net/hkpna40r/1/
annotations: [{
labelOptions: {
backgroundColor: 'rgba(255,255,255,0.5)',
verticalAlign: 'top',
y: 4
},
labels: [{
point: {
xAxis: 0,
yAxis: 0,
x: Date.UTC(2019, 11, 2),
y: 3
},
zIndex:100,
text: 'Arbois'
}],
}],
You can achieve what you want by attaching a module called series-label and set plotOptions.area.label like that:
plotOptions: {
area: {
label: {
enabled: true,
onArea: false
}
},
line: {
label: {
enabled: false
}
}
}
Note, annotations also work but you have to attach annotations module separately.
Demo:
https://jsfiddle.net/BlackLabel/5utLhenb/
API reference:
https://api.highcharts.com/highcharts/plotOptions.area.label
https://www.highcharts.com/docs/advanced-chart-features/annotations-module

highcharts no point markers but show single point or discontinous points

I've set markers in HighCharts to false for line charts, but I would this means that if the series a single point or if there is a discontinuous series like: [2.45, 7.89, null, 3.45] the 3.45 point would not show up at all on the chart. Is there a way to fix this?
line: {
marker: {
enabled: false
}
}
The 3.45 point does appear on the chart - if you hover over where it supposed to be you can see it highlighted. Issue is there is no line connecting to it from your 7.89 because connectNulls is false by default. To see the points connected turn this to true. You can also enable a marker per point not just per series:
series: [{
data: [{
y: 2.45
}, {
y: 7.89
}, {
y: null
}, {
y: 3.45,
marker: {
enabled: true
}
}]
Sample fiddle.

Multiple axis does not work on Highcharts 4

I have a function that adds another axis and serie to chart dynamically. It used to work well in Highcharts 3. Then i upgraded to Highcharts 4, but it adds axis but does not add serie.
chart.addAxis({ // Secondary yAxis
id: tempId,
title: {
text: tempName
},
lineWidth: 2,
lineColor: serie.color,
opposite: opposition
});
var lbl = getLabelStatus_<?=$id?>(id);
chart.addSeries({
name: tempName,
type: serie.type,
color: serie.color,
yAxis: tempId,
data: serie.data,
dashStyle: serie.options.dashStyle,
dataLabels: {
enabled: lbl,
rotation: serie.options.dataLabels.rotation
}
});
Did they change something about axis in v4? How can i solve this problem?
Try ;
data : serie.options.data,

Customize X axis - Kendo UI

I have implemented the following project. There are two lines on the chart.
However, I want to change position of x axis to move 0 at the center.
seriesDefaults: {
type: "scatterLine",
},
series: [{
name: "Path1",
data: stats,
markers: {
visible: false,
color: 'red'
}
}, {
name: "Path2",
data: stats2,
markers: {
visible: false
}
}],
http://jsfiddle.net/3yhbyy2g/13/
I need to customize x axis and reverse the datasource to display as follows:
Here is the solution:
All I did is to add the following lines of code:
min:-5000,
axisCrossingValue: [-5000, 0],
http://jsfiddle.net/3yhbyy2g/19/

Highcharts bar and scatter series not lining up

I'm trying to create a chart using highcharts that includes both a column series and a scatter series with a custom point marker. The series will contain slightly different sets of data, but will overlap for the most part and will always have the same x-axis values.
I've set it up, but the problem is that it's not lining up perfectly. Some of the scatter series' points are shifted one or two pixels to the left of the corresponding bar.
Any ideas about how to fix this?
{
chart: {
animation: false
},
xAxis: {
tickInterval: 1
},
series: [{
type: "column",
borderWidth: 0,
pointWidth: 20,
name: "col"
},
{
type: "scatter",
states: { hover: { enabled: false } },
marker: { symbol: 'url(symbol.png)' }
}]
}
And here's a screenshot of what's happening:
Indeed it looks like a bug, also with standard markers, so I've decided to report it to our developers https://github.com/highslide-software/highcharts.com/issues/1843

Categories

Resources