I am building a Highcharts donut chart with specific data for each slice of both pies. Tooltip data is passed inside the drilldown portion of the data and is displayed correctly for the outer ring.
The inner tooltip however is passed by the main data variable and shows the tooltip for the last outer ring that was hovered over.
I would like to specify the data for the inner tooltip as follows:
data = [{
y: 44.73,
color: '#2f7ed8',
drilldown: {
name: 'Unknown',
categories: ['Google', 'Unknown'],
data: [0.00, 44.73],
tooltip_data: ['Google tooltip', 'Unknown tooltip']
},
tooltip_inner: 'Inner Tooltip here'
} ...
My question is, can I pick up which graph is being hovered over (inner or outer) and modify which tooltip is returned by the formatter? The formatter returns the correct data if I do it so:
tooltip: {
useHTML: true,
formatter: function() {
return this.point.tooltip_data;
}
}
Switching the returned data to this.point.tooltip_inner works for the inner pie but of course disregards the outer. I need to be able to switch which point data is returned from tooltip_data if outer to tooltip_inner if inner.
Fiddle with variables for each slice is here: http://jsfiddle.net/bQqM8/
Edit: The fiddle now contains the working example in case anyone else needs to do this.
the problem is the way you create data, let's consider:
trafficData.push({
name: categories[i],
y: data[i].y,
tooltip_inner: data[i].tooltip_inner,
color: data[i].color,
tooltip_data: data[i].tooltip_data // here you are getting tooltip.data
});
And compare that with your data:
data = [{
y: 33.84,
color: '#ff0000',
drilldown: {
name: 'Downloads',
categories: ['News', 'P2P'],
data: [30.36, 3.48],
color: '#ff0000',
tooltip_data: ['News drilldown data here', 'P2P drilldown data here']
},
tooltip_inner: 'Inner Download Tooltip'
},
...
{ another point } ]
I don't see tooltip_data in point object, only in drilldown object. Add missing tooltip_data so it will work.
Related
I'm getting some troubles to set icons on my series over,infront,top,bot (anywhere) it.
I'm using an API (agromonitoring.com) to get the Data with XHTML request parsing it to JSON then showing using Highcharts, the main problem is that most of the examples to add Icons or Images are using xAxis Categorized, but in my case I'm using an xAxis "date-time" which is always changing that's why I can't use this example (https://www.highcharts.com/demo/spline-symbols) of course I tried,but it doesn't work.
So Here it's the Example of Highcharts
https://codepen.io/pen/?editors=0010
and this is my example(both sites same)
https://playcode.io/447786 (love PlayCode couse integrates console)
https://jsfiddle.net/Miguel5tuxD/afgrzLv7/
I'm trying to useiconUrl getting from that Switch to then parse around 40 icons to the Highchart
Expecting something like the example but with all points an Icon
The problem is that you don't set icons URL for point markers anywhere. So the solution is to pass points array like that (spline series):
[{
x: x,
y: y,
marker: {
symbol: url
}
}, ...]
In your example:
{
name: 'Temperatura',
type: 'spline',
data: datos3.map((item, index) => {
return {
x: item[0],
y: item[1],
marker: {
symbol: datos[index],
width: 20,
height: 20
}
}
}),
tooltip: {
valueSuffix: ' °C',
valueDecimals: 2,
},
marker: {
enabled: true
},
color: Highcharts.getOptions().colors[2],
}
Demo:
https://jsfiddle.net/BlackLabel/c81qz5vr/
In Charts.js, i am trying to create a bar chart with a single data set and each column being differently coloured.
The desired result would look like this:
However, when i try to create something like this, at best, i get the following
The following code is the chart config object used to initialise the chart:
var config_canvas_alerts = {
type: 'bar',
data: {
datasets: [{
data: [
value0,value1,value2,value3,
],
backgroundColor: [
"#F7464A","#46BFBD","#FDB45C","#949FB1",
],
}],
labels: [
"Move - Match " + value0,
"Move - Unmatch " + value1,
"Permit - Match " + value2,
"Permit - UnMatch" + value3,
]
},
options: {
responsive: true,
legend: {
position: 'right',
onClick: function (e, p) {
alert(p.text);
},
},
title: {
display: true,
text: '#Model.mgt_dash_alert.graph_title',
position: 'top',
fontStyle: 'normal',
fontSize: 14,
padding: 10
}
}
};
I have tried to restructure the data so that each data value becomes its own dataset object with accompanying value, background colour and label but that didnt work out well either.
The only way i was able to achieve this (and hence how i generated the first screenshot) was by dynamically changing the graph from a pie chart to a bar chart after initialisation. The legend seemed to work well.
Changing dynamically from pie to bar chart is not ideal. Any suggestions here?
I am tried to get the series from the already displayed highchart and use that series to plot a new chart in another one html div, i have written below code to achieve this,finally i get the series from existing graph but can't render to the new html div
var data = chart.series; // series from already displyed
jQuery('#commonModal_res').highcharts({
chart: { zoomType: 'x'},
title: { text: "" },
subtitle: { text: 'Click and drag in the plotted area to zoom in' },
xAxis: { type: 'datetime' },
legend: { enabled: false },
series: data,
});
note : throwing too many recursion error
The problem occurs because you're trying to assign the complete and already built series object, instead of configuration object which is required. In order to make it work, you need to assign the configuration object by this way:
$('#new_con').highcharts({
chart: { zoomType: 'x'},
title: { text: "" },
subtitle: { text: 'Click and drag in the plotted area to zoom in' },
xAxis: { type: 'datetime' },
legend: { enabled: false },
series:charts[0].userOptions.series,
});
Then your chart should be rendered properly.
Additionaly, you can access appropriate chart by the Highcharts.charts array on global Highcharts object, where all charts are stored, just like that:
series: Highcharts.charts[0].userOptions.series,
In this case creating new charts array is unnecessary.
Live example: http://jsfiddle.net/cqfj5t34/
I know how to disable hover on highcharts, and I edit the answer to disable hove on special slice as this demo, but it doesn't work.
I edit series attribute as the following:
series: [{
showInLegend: false,
type: 'pie',
name: 'Pie Chart',
data: [
['Mobile', 65], // first half of pie
{
name: 'Other',
y: 35,
tooltip: { enabled: false }
} // second half of pie
]
How can I disable hover for special slices on pie charts using highcharts ?
You were pretty close with your custom tooltip property idea. I personally rather using custom names as well, therefor instead of adding a tooltip data object, i'd use a custom property named tooltipDisabled:
{name: 'Other', y: 35, tooltipDisabled:true} // second half of pie
And then, using a tooltip formatter function (a callback function called when a point is hoverd, which is totally override-able), I'd discriminate the points with this property:
tooltip: {
useHTML:true,
formatter: function(){
return this.point.tooltipDisabled ? false : this.point.name +"<br><span style='font-size:18px;vertical-align:middle'>•</span>"+this.series.name+": <b>"+this.y+"</b>";
}
returning false, as you have probably guessed, disables the tooltip.
(as you can see I also added useHTML:true, so highcharts renders the bullet next to the point name.
See fiddle: http://jsfiddle.net/e7brd9do/2/
I'm trying to update a point[x,y] in the chart.
What's the problem?
Ok, I chart and its chart series are like this:
series: [
{
enableMouseTracking: false,
name: 'Line1',
type: 'line',
color: '#5d5d5d',
yAxis: 1,
data: [[12000, 55.068493], [15064, 42.842]],
marker: {
symbol: 'circle'
}
},
{
enableMouseTracking: false,
name: 'Line2',
type: 'line',
color: '#5d5d5d',
yAxis: 1,
marker: {
symbol: 'circle'
},
data: [[12000, 57.671527], [16000, 42.620069]]
},{
name: 'TOM',
//type: 'line',
color: '#ff4100',
yAxis: 1,
marker: {
symbol: 'url(icons/tom.png)'
},
data: [
{
id:'tom_point',
color: '#00FF00',
y: fi_variable,
x: tom_variable
}
]
}
Now the thing is that, I'm checking if fi_variable or tom_variable has changed and if its true, update these two variables, and finally update the chart.
I have tried already, some methods like chart.series[0].data[0].update(y = 10); and its working for some points with fixed x,y values, but no luck for the rest of the points.
For Instance I use chart.series[0].data[1].update(y = 10); will work ok,
but this chart.series[0].data[3].update(y = 10); will not work.
1- Is there any way to replace the data[0] from the above code line with an id of a point in our case tom_point ?
Also I've tried this chart.series[0].setData([[tom_variable,fi_variable, 'tom_point']]);
and again it wont working when the point is with an id or without fixed values.
But If I try chart.series[0]data[0].setData([[tom_variable,fi_variable]]); it works but again not on 3rd element (in our case - as shown above) of the series.
I can get the values for this point with the following,
var tomPoint = chart.get('tom_point').y;
but I can't set any x,y values back to chart and update it (the chart).
I have also tried to check if the variables have changed and to redraw the chart with chart.redraw but nothing.
Any Ideas how can I get this to work?
Am I losing something?
Thank you in Advance for your time.
First of all you try to update point (data[3]) which doens't exist in serie. Secondly in case when you update you need to use
chart.series[0].data[1].update(10); or chart.series[0].data[1].update({y:10}); but not yoru figure
if you want to change the x value also then use
chart.series[0].data[0].update({
x: 10,
y: 100
})
this will update both x and y values like in this example http://jsfiddle.net/DCA8W/
Hope this is what you are looking for.
Ok, the solution finally was simple.
I've managed to update the point:
The third element in the series with the name TOM corresponds to
chart.series[2].
{ // chart.series[2]
name: 'TOM',
//type: 'line',
color: '#ff4100',
yAxis: 1,
marker: {
symbol: 'url(icons/tom.png)'
},
data: [
{
id:'tom_point',
color: '#00FF00',
y: fi_variable,
x: tom_variable
}
]
}
So in order to update [x,y] values of this point, you have to do it like that:
// TOM Point
`chart.series[2].data[0].update({x:var_x, y:var_y});`