We Keep Coding

Highcharts: only show part of a map

I'm using a map in HighCharts and sometimes I need to just show a section of the map, not the entire map. I think I could manually do this by zooming into a part of the map but ideally I would like to specify a bounding box with lat/lon coordinates for example. I'm sure this must be possible — in the API there is mention of mapTransforms but I don't know how to use it.
https://api.highcharts.com/highmaps/chart.mapTransforms
The best in my case would be for HighCharts only to display the parts of the map with data — there is an option in the API to not display all areas (https://api.highcharts.com/highmaps/series.map.allAreas) but this is not what I want. That option simply doesn't render the parts of the map with no data and I definitely don't want to do that.
An example of an official JSFiddle is here:
https://jsfiddle.net/gh/get/jquery/1.11.0/highslide-software/highcharts.com/tree/master/samples/mapdata/custom/world-continents
// Prepare demo data
// Data is joined to map using value of 'hc-key' property by default.
// See API docs for 'joinBy' for more info on linking data and map.
var data = [
['eu', 0],
['oc', 1],
['af', 2],
['as', 3],
['na', 4],
['sa', 5]
];
// Create the chart
Highcharts.mapChart('container', {
chart: {
map: 'custom/world-continents'
},
title: {
text: 'Highmaps basic demo'
},
subtitle: {
text: 'Source map: World continents'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series: [{
data: data,
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
What would I do so that the initial map loads on, for example, mainly Europe?
Thanks to anyone who can help with this!

Take a look at the docs, where you can find the example: https://api.highcharts.com/class-reference/Highcharts.MapView#setView
However I think that for your case you should use zoomBy feature: https://api.highcharts.com/class-reference/Highcharts.MapView#zoomBy

You can use zoomTo() to zoom into specific point of your data.
I modified few things
mapData = Highcharts.maps["custom/world-continents"].features
this is from your data js for the data. This gives the map the relevant data
Added a loadto function, you can call it wherever you want, this is just for demo, i tried to call it under chart but didn't work out. so you can use document load or ready or after chart load.
chart.get('EU').zoomTo() here chart is the variable and EU "uppercase" is the data point from mapdata. you can use any continent AS AF etc.
Code
var data = [
['eu', 0],
['oc', 1],
['af', 2],
['as', 3],
['na', 4],
['sa', 5]
];
var mapData = Highcharts.maps["custom/world-continents"].features
// Create the chart
var chart = Highcharts.mapChart('container', {
chart: {
map: 'custom/world-continents',
},
. . .
series: [{
data: data,
mapData: mapData,
allowPointSelect: true,
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
function loadto() {
chart.get('EU').zoomTo();
}
loadto()
You can copy these parts it will work in the fiddle.

ChartJS - Finding the minimum and maximum labels that are inside a pan (When zooming)

I have a chart like this:
Now I need to find the minimum and maximum labels that are inside a pan, when I zoom, for example:
The minimum would be 2018-07-16, and the maximum would be 2018-11-3.
For panning, I'm using this attribute:
pan: {
enabled: true,
mode: 'x',
onPanComplete: function(e) {
console.log(e)
}
}
If I look at the returned object, I see a lot of information about this pan. But I can't find relevant information to conclude these extremum labels.
I thought the attribute chartArea would be sufficient, but its value doesn't differ for two very different pans. Same goes for config, boxes, and a lot of other attributes.
How can I find these extremum labels?

I assume you're using chartjs-plugin-zoom for this.
Digging around in the chart object passed to the onPanComplete function reveals that the scales property is updated to achieve the zoom'n'pan functionality. Knowing this, it's fairly trivial to retrieve the first and last tick objects which contain the label property you're looking for.
Below is a snippet that demonstrates accessing the ticks via onPanComplete and outputting them to the page:
let ft = document.getElementById("ft"),
lt = document.getElementById("lt");
new Chart(document.getElementById("chart"), {
type: "line",
data: {
labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
datasets: [{
data: [0, 1, 2, 4, 8, 16, 32, 64, 128, 256]
}]
},
options: {
maintainAspectRatio: false,
scales: {
xAxes: [{
ticks: {
min: 'c',
max: 'h'
}
}]
},
plugins: {
zoom: {
pan: {
enabled: true,
mode: 'x',
onPanComplete: function({
chart
}) {
let ticks = chart.scales["x-axis-0"]._ticks;
ft.innerText = JSON.stringify(ticks[0]);
lt.innerText = JSON.stringify(ticks[ticks.length - 1]);
}
}
}
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.1"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs#2.0.8"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom#0.7.4"></script>
<canvas id="chart" style="max-height:125px"></canvas>
<p>
First tick: <span id="ft"></span><br>Last tick: <span id="lt"></span>
</p>

How to create highlight area under curve in high chart?

I create a high chart using angular 4 and I want to highlight a particular portion of Highchart.
Ex Image :https://www.screencast.com/t/MHxo59j2dM
As per above image if data point value goes below to some limit (like 0) then highlight with "Red" color and if it goes below 8 then highlight with Yellow
I'm not sure whether its possible with Highchart or not but if someone had created this kind of features then please let me know.
Highchart provides Area Chart option - https://www.highcharts.com/demo/area-negative but my chart is normal and I don't want to highlight all series point.

There's no such functionality in Highcharts, but you can mimic it by using polygon series and plot lines:
var chart = Highcharts.chart('container', {
plotOptions: {
polygon: {
showInLegend: false
}
},
yAxis: {
tickInterval: 1,
plotLines: [{
value: 4,
color: 'orange',
width: 2
}, {
value: 3,
color: 'red',
width: 2
}]
},
series: [{
data: [6, 4, 3, 1, 2, 3, 4, 7]
}, {
type: 'polygon',
data: [[1,4], [2, 4], [2,3]],
color: 'orange'
}, {
type: 'polygon',
data: [[5,4], [6, 4], [5,3]],
color: 'orange'
}, {
type: 'polygon',
data: [[2,3], [5, 3], [4,2], [3,1], [2,3]],
color: 'red'
}]
});
Live working example: http://jsfiddle.net/kkulig/fbomb7cf/
It will require some programming to make the process of creating these areas automatic (in my fiddle everything is hard-coded).
To achieve similar styling you can try patter fill Highcharts plugin: https://www.highcharts.com/blog/extension/pattern-fill/
API references:
http://api.highcharts.com/highcharts/series.polygon
http://api.highcharts.com/highcharts/yAxis.plotLines

How to add panning to chart in chartjs?

I have created a bar chart with chartjs. I am also using chartjs-plugin-zoom. I have tried several ways but can’t find a way to add panning functionality to chart. Does anyone know how can I add this?
Here is my code:
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [1, 2, 3, 4, 5...],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2...]
}]
},
options: {
zoom: {
enabled: true,
mode: 'x',
}
}
});

ꜰɪʀꜱᴛ
add hammer.js to your project :
<script src="http://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
ꜱᴇᴄᴏɴᴅ
enable pan option for your chart, like so :
options: {
pan: {
enabled: true,
mode: 'x',
},
...
}
see demo on jsFiddle

Maybe you can use this plugin. See the example.
Basically you need to import and initialize it. By default, if you hold shift and drag the chart, it will pan, but you can also set a custom input trigger.

How to create a line to show threshold in bar graph

I am using flot to create bar charts like
I need to specify a threshold like a line at 750(y axis) for example, to show the limit...
there is one jquery.flot.threshold.js file in flot package, but i dont know how to use it on bar charts.How to do it ?

Seems there was some issues with using the threshold plugin with the current flot release version. If you just want to mark a threshold, it might be easier to use the grid markings option:
$.plot($("#placeholder"), [ d1, d2, d3 ], {
series: {
stack: true,
bars: { show: true, barWidth: 0.6 }
},
grid: {
markings: [ { xaxis: { from: 0, to: 12 }, yaxis: { from: 0, to: 20 }, color: "#6D7B8D" }]
}
});
Produces (fiddle here):