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.
Related
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.
I'm trying to make a radar chart using quickchart.io. I accomplished the look I want on raw html, but for some reason, quickchart doesn't like it when it comes to radial option :(
{
type: 'radar',
data: {
labels: ['A', 'B', 'C', 'D', 'E'],
datasets: [
{
data: [5, 4, 3, 3, 5],
label: 'Dataset'
},
{
data: [5, 4, 5, 3, 2],
label: 'Dataset 2'
}
],
},
options: {
scales: {
r: [
{
min:'0',
max:'5',
ticks: {
stepSize: '1'
},
},
],
}
},
}
It looks like it's totally ignoring everything in options. As you can see, I want the chart always start from 0 and tick mark increased by 1. Here's the result of the code above:
https://quickchart.io/chart?c=%7B%0A%20%20type%3A%20%27radar%27%2C%0A%20%20data%3A%20%7B%0A%20%20%20%20labels%3A%20%5B%27A%27%2C%20%27B%27%2C%20%27C%27%2C%20%27D%27%2C%20%27E%27%5D%2C%0A%20%20%20%20datasets%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20data%3A%20%5B5%2C%204%2C%203%2C%203%2C%205%5D%2C%0A%20%20%20%20%20%20%20%20label%3A%20%27Dataset%27%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20data%3A%20%5B5%2C%204%2C%205%2C%203%2C%202%5D%2C%0A%20%20%20%20%20%20%20%20label%3A%20%27Dataset%202%27%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%2C%0A%20%20%7D%2C%0A%20%20options%3A%20%7B%0A%20%20%20%20scales%3A%20%7B%0A%20%20%20%20%20%20r%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20min%3A%270%27%2C%0A%20%20%20%20%20%20%20%20%20%20max%3A%275%27%2C%0A%20%20%20%20%20%20%20%20%20%20ticks%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20stepSize%3A%20%271%27%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%7D%0A%20%20%7D%2C%0A%7D%0A
Can anyone help me?
You are trying to use v3 syntax but you are using it incorrect, the scales dont use arrays anymore. You also have to specify to quickchart you are using v3 like so https://quickchart.io/chart?version=3&c=CHARTCONFIG
Correct scale config V3 for you:
scales: {
r:{
min:'0',
max:'5',
ticks: {
stepSize: '1'
},
},
}
Working url based on your sample:
https://quickchart.io/chart?version=3&c=%7B%0D%0A%20%20type%3A%20%27radar%27%2C%0D%0A%20%20data%3A%20%7B%0D%0A%20%20%20%20labels%3A%20%5B%27A%27%2C%20%27B%27%2C%20%27C%27%2C%20%27D%27%2C%20%27E%27%5D%2C%0D%0A%20%20%20%20datasets%3A%20%5B%0D%0A%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20data%3A%20%5B5%2C%204%2C%203%2C%203%2C%205%5D%2C%0D%0A%20%20%20%20%20%20%20%20label%3A%20%27Dataset%27%0D%0A%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20data%3A%20%5B5%2C%204%2C%205%2C%203%2C%202%5D%2C%0D%0A%20%20%20%20%20%20%20%20label%3A%20%27Dataset%202%27%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%5D%2C%0D%0A%20%20%7D%2C%0D%0A%20%20options%3A%20%7B%0D%0A%20%20%20%20scales%3A%20%7B%0D%0A%20%20%20%20%20%20r%3A%20%0D%0A%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20min%3A%270%27%2C%0D%0A%20%20%20%20%20%20%20%20%20%20max%3A%275%27%2C%0D%0A%20%20%20%20%20%20%20%20%20%20ticks%3A%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20stepSize%3A%20%271%27%0D%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%7D%0D%0A%20%20%7D%2C%0D%0A%7D
quickchart.io defaults to latest Chart.js v2 according to their documentation. Therefore, your chart options need to be written as follows. Alternatively you can try to define the version parameter to explicitly tell quickchart.io to use Chart.js v3.
options: {
scale: {
ticks: {
suggestedMin: 0,
suggestedMax: 5,
stepSize: '1'
}
}
}
For further details about the latest Chart.js v2 radar charts, please consult https://www.chartjs.org/docs/2.9.4/charts/radar.html
I am working on a check website to validate some information of a users' website. I have a C3JS Chart configured with the following code:
window.onload = function () {
var debug = {{ env('APP_DEBUG') }}
console.log('Debug: ' + debug);
var chart = c3.generate({
data: {
columns: [
['alpha', 100],
['bravo', 100],
['charlie', 50],
['delta', 1],
],
colors: {
'alpha': '#3FB34F',
'bravo': '#3FB34F',
'charlie': '#E8B30C',
'delta': '#EB370F',
},
type: 'bar',
labels: true,
},
bar: {
space: 0.05
},
axis: {
rotated: true
},
});
This code results in the next chart
How can I add a label (like alpha, bravo...) in the green/orange/red bar instead of having them on the bottom of the chart?
I do not have a solution ready but I could think of two possible solutions.
You should be able to create a custom legend like described here: https://c3js.org/samples/legend_custom.html and then move these labels to the respective bars using translate/transform and D3js.
You could try to move the existing labels using D3 and translate/transform.
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
I have a scatter plot highcharts in my page, it renders very well. The problem is when I scroll the mouse within the tooltip area the chart zooming functionality is executing. I need to disabled this one. But I don't want totally to disabled the zooming of the chart since the requirements stated that it needs the chart to zoom in, to look into the dots information when there are overlapping dots. Any help on this please? Or any one has an idea how to find the zoomtype property manually using javascript? I try it to find using firebug but no to avail.
//Code sample
var data = [
[1, 1],
[2, 2],
[3, 3],
[4, 4]
];
var chartingOptions = {
chart: {
renderTo: 'container',
zoomType: 'xy'
},
tooltip: {
useHTML: true,
shared:false,
formatter: function() { return '<div style="height:100px;width:200px;overflow:auto"><table><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr></table>'}
},
series: [{
type: 'scatter',
name: 'serie',
data: data
}]
};
chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(), chartingOptions);
var chart = new Highcharts.Chart(chartingOptions);
var $tooltip = $(chart.tooltip.label.element);
$tooltip.mouseup(function (e) {
chart.tracker.selectionMarker = chart.tracker.selectionMarker.destroy();
});
You can handle the mouseup event on the tooltip element and destroy the zoom selection element in this handler. Highcharts uses this selection element to decide if zooming is needed or not. This will trick highcharts to believe that nothing has been selected.
Code
var $tooltip = $(chart.tooltip.label.element);
$tooltip.mouseup(function (e) {
chart.tracker.selectionMarker = chart.tracker.selectionMarker.destroy();
});
There may be some side effects to this, like, if you actually were zooming and your zoom selection happened to end on the tooltip, it won't zoom. This may be acceptable, if not you can find a way to workaround that too, by having some more checks in the above handler to see if its actually zooming or something like that.
Demo
Handling mouse events in tooltip | Highchart & Highstock # jsFiddle
//Code sample
var data = [
[1, 1],
[2, 2],
[3, 3],
[4, 4]
];
var chartingOptions = {
chart: {
renderTo: 'container',
zoomType: 'xy'
},
tooltip: {
useHTML: true,
shared:false,
formatter: function() { return '<div style="height:100px;width:200px;overflow:auto"><table><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr></table>'}
},
series: [{
type: 'scatter',
name: 'serie',
data: data
}]
};
chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(), chartingOptions);
var chart = new Highcharts.Chart(chartingOptions);
var $tooltip = $(chart.tooltip.label.element);
$tooltip.mouseup(function (e) {
chart.tracker.selectionMarker = chart.tracker.selectionMarker.destroy();
});
I solved this one. I just add a mousedown="event.cancelBubble=true" event in the div element and it WORKS!