I tried adding following dragDrop property in series. But points on the maps are not getting dragged.
series:[
{
type: 'mappoint',
dragDrop: {
draggableX: true,
draggableY: true
}
]
I am using Highmap of mappoint type with lat and long.
Example: here
Versions highcharts-react-official#2.0.0 and highcharts#7.0.2
You have to load modules/draggable-points.js.
API:
https://api.highcharts.com/highmaps/series.mappoint.dragDrop
Demo:
https://jsfiddle.net/BlackLabel/0cq3a9h4/1/
Related
Here is the Stackblitz Demo of the issue
Preview link (for better visibility): https://highcharts-angular-stock-a1hvg5.stackblitz.io/
Issue is : The last plot that is visible on the right most edge of the chart is of 12/27/2021
This is wrong as the the series data is available till 12/30/2021 and that should be visible on the right most edge instead of 12/27/2021. It however works when we zoom in slider to 1 year period
How can I make the original chart also display data till 12/30/2021 (series maximum)?
This behaviour is caused by the data-gropuing feature. You can disable the feature:
"plotOptions": {
"area": {
...,
dataGrouping: {
enabled: false
}
}
}
or control anchor behaviour:
"plotOptions": {
"area": {
...,
dataGrouping: {
anchor: 'end',
lastAnchor: 'end'
}
}
}
Live demo: https://stackblitz.com/edit/highcharts-angular-stock-mpcl1d
API Reference: https://api.highcharts.com/highstock/series.line.dataGrouping
Docs: https://www.highcharts.com/docs/stock/data-grouping
I am trying to import a custom map and use the bubble map type in highcharts; however, I am running into the issue where I was not able to see thee bubbles showing up on the map.
The following are the steps that I took to transform the map to the correct format to use for HighMaps:
1. Import the GeoJSON(Map of Denver) to QGIS
2. Selected EPSG:26754 - NAD27 / Colorado Central for CRS
3. Export it as GeoJSON
4. import the GeoJSON to my app
I am suspecting that the crs value is not correct, but I am not sure if I am going in the right direction.
Currently, I am working with this GeoJSON below:
https://jsfiddle.net/amilford/5oxnavm1/1/
Our end goal is to be able to plot couple bubbles on the map based on their lon, lat and z value.
[{name: "A", lat: 39.8207, lon: -104.7691, z: 100},{name: "B", lat: 39.7998, lon: -104.8687, z: 150},{name: "C", lat: 39.7981, lon: -104.4884, z: 200}]
on the Denver map.
Whenever I try to plot more points, everything is stacking on each other, at the end I am only able to see two stack of dots on the screen with no map on the background.
The map seems to work if I don't try and plot points on it and the points seem to work on other non-custom maps (such as a world map or a US map).
I found the solution here: https://www.highcharts.com/forum/viewtopic.php?t=35170
turns out setting the 'hc-transform' on the map to:
{
"default": {
"crs": "WGS84"
}
}
worked for me too!
Another solution which I can suggest is to use x and y coordinates to render wanted bubbles.
Highcharts.getJSON('https://api.myjson.com/bins/1gwnh0', function(geojson) {
console.log(geojson)
// Initiate the chart
Highcharts.mapChart('container', {
chart: {
map: geojson
},
xAxis: {
visible: true
},
yAxis: {
visible: true
},
series: [{
data: [],
}, {
type: 'mapbubble',
data: [{
name: 'point1',
x: -105,
y: -39.75,
z: 80
}]
}]
});
});
See demo: https://jsfiddle.net/BlackLabel/q1v6u4xp/1/
When I just draw the graph with 'spline', the yaxis interval is resaonable so the graph look's good.
The code is as follows:
chart: {
type: 'spline'
}
But, when I change the type to 'area', the interval is changed too. Therefore, the graph look's bad.
chart: {
type: 'area'
}
How can I fix it without setting label's 'min' and 'tickInterval'
I need this becuase if I set the label property, there would be followed bunch of works.
One way you can achieve this, is by using the following function that triggers on the event load:
chart: {
type: 'area',
events: {
load: function() {
let chart = this;
let tmpMaxMin = chart.yAxis[0].getExtremes();
chart.yAxis[0].setExtremes(tmpMaxMin['dataMin'], tmpMaxMin['dataMax']);
}
}
},
Working example: http://jsfiddle.net/ewolden/La13rjwf/
API on events.load: https://api.highcharts.com/highcharts/chart.events.load
API on getExtremes: https://api.highcharts.com/class-reference/Highcharts.Series#getExtremes
Answer based on: https://stackoverflow.com/a/35870891/8376046
Simply set softThreshold property to true.
API Reference:
https://api.highcharts.com/highcharts/plotOptions.area.softThreshold
Example:
http://jsfiddle.net/srx8py4v/
I use Highcharts to visualize 3D charts in my project. Particularly I am interested in showing a 3D scatter plot like this. Below the chart you can see the options as well as the respective jsFiddle.
Is there a possibility to display a label with every point's name always i.e. that hovering is not required?
Thanks!
Within the series you can enable the datalabels like this:
series: [{
dataLabels: {
enabled: true,
},
}]
http://jsfiddle.net/oghokm8w/1/
then you could use the formatter to customise the text to be displayed:
series: [{
dataLabels: {
enabled: true,
formatter: function () {
return this.point.x;
},
}
}]
I have three highcharts containers on the same page and want to create a function which is available to all charts, so I have defined the function in setOptions. The function is working well but I don't know which graph has triggered the event.
How do I know which chart triggered the event?
plotOptions: {
series: {
cursor: 'pointer',
allowPointSelect: true,
point: {
events: {
select: function () {
alert($(this).attr('id')); // I need this to be the chart id
}
}
},
Two ways:
use this.series.chart.options.chart.renderTo to get string you have passed when creating chart
use this.series.chart.renderTo.id to get ID's string, (will be the same as above).
You can use this.series.chart to get the chart object that was clicked. I'm not sure how you're assigning an "ID" to your chart, but presumably having a handle to the chart itself will be sufficient.