I want to wrap the following code as a define method
require([
'highcharts',
'highcharts/modules/exporting',
'highcharts/modules/accessibility'
], function (Highcharts) {
// This function runs when the above files have been loaded.
// Create a test chart.
Highcharts.chart('container', {
series: [{
data: [1,2,3,4,5]
}]
});
});
I use durandal SPA . so i need to have a define method to cal it from other places .
The simplest solution is to replace require with define:
define([
'highcharts',
'highcharts/modules/exporting',
'highcharts/modules/accessibility'
], function (Highcharts) {
Highcharts.chart('container', {
series: [{
data: [1,2,3,4,5]
}]
});
});
Related
When using the tooltip inside the »series« element, it displays a kind of bullet point (and eventually the series name), which I don't want to see:
Is there any way to suppress this? Couldn't find anything. Seems that this doesn't happen when using the tooltip element not within the series element. But then, I don't succeed to access the JSON country name tags.
Here is a fiddle.
Highcharts.mapChart('container', {
series: [{
mapData: Highcharts.maps['customMap'],
joinBy: 'ISO3CD',
keys: ['ISO3CD', 'value'],
data: [
["RUS", 200]
],
tooltip: {
pointFormat: '{point.properties.ROMNAM}: <b>{point.value}</b>'
}
//data: data,
}]
});
Thanks for any hints.
This is the tooltip header which can be hidden like this:
tooltip: {
headerFormat: undefined,
pointFormat: '{point.properties.ROMNAM}: <b>{point.value}</b>'
}
I’ve got two series in my chart. I have data coming every day. I register two kinds of information for every data in both series. There are five points in the first series but four in the second one. It is vital for both to have a point for every data. I want the absent point in the second series to be filled by the average of its two neighbor points.
Does highstock have any solution for that?
example:
<script src="jquery.js"></script>
<script src="highstock.js"></script>
<script type="text/javascript">
jQuery(function(){
var $ = jQuery;
Highcharts.stockChart('chart', {
chart: {
panning: false,
},
plotOptions:{
series:{
dataGrouping: {
forced: true,
units: [['day', [1]]]
},
}
},
series: [{
type: 'line',
color:'#23bdbd',
data: [
[1558224000000,8197.68969113999992259778082370758056640625],
[1558310400000,7978.3090724399999089655466377735137939453125],
[1558396800000,7963.3277791099999376456253230571746826171875],
[1558483200000,7680.06654589000027044676244258880615234375],
[1558569600000,7881.846721050000269315205514430999755859375]
],
},
{
type: 'line',
color:'#ff5d5d',
data: [
[1558224000000,100],
[1558310400000,150],
[1558483200000,2300],
[1558569600000,5500]
],
}],
});
});
</script>
<div id="chart"></div>
You can achieve it by adding additional logic in the load event callback. Filter the data and find absent points, then add absent points using series.addPoint(). Check the code and demo posted below.
Code:
chart: {
panning: false,
events: {
load: function() {
const chart = this;
const absentPoints = chart.series[0].xData.filter(
data => chart.series[1].xData.indexOf(data) === -1
);
absentPoints.forEach(absentPoint => {
const index = chart.series[0].xData.indexOf(absentPoint);
const value =
(chart.series[1].yData[index] +
chart.series[1].yData[index - 1]) /
2;
chart.series[1].addPoint([absentPoint, value], false);
});
chart.redraw(false);
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/91ntpmyr/
API reference:
https://api.highcharts.com/class-reference/Highcharts.Series#addPoint
In Highcharts.js is it possible to disable/enable a given category by clicking on it? In the same way as you can disable/enable a given series in a legend by clicking on it.
If not, what is the next best alternative?
Disabling a category by clicking on it is not supported in Highcharts by default. To acheieve the wanted result you need to add custom code. For example, in render event you can add click event to xAxis labels and update the chart with new categories and data:
var H = Highcharts,
categories = ['one', 'two', 'three'],
data = [1, 2, 3];
chart = Highcharts.chart('container', {
chart: {
events: {
render: function() {
var chart = this;
H.objectEach(chart.xAxis[0].ticks, function(tick) {
if (tick.label) {
H.addEvent(tick.label.element, 'click', function() {
data.splice(tick.pos, 1);
categories.splice(tick.pos, 1);
chart.update({
series: [{
data: data
}],
xAxis: {
categories: categories
}
});
});
}
});
}
}
},
series: [{
type: 'column',
data: data
}],
xAxis: {
categories: categories
}
});
Live demo: http://jsfiddle.net/BlackLabel/8wfx5yve/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#update
When using Highcharts Navigator the docs mention:
Unless data is explicitly defined on navigator.series, the data is borrowed from the first series in the chart.
$(function () {
$('#container').highcharts('StockChart', {
navigator: {
series: {
lineWidth: 1
}
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: usdeur
}]
});
});
But as in the example of Highcharts Navigator itself here the data is not exactly the data from the first series in the chart. In this example the date is between 2007-2015 but navigator only shows 2008-2014. Is there a way to override this option? How can I change this?
I have one chart and i want to include hover on area but i found it works only on point only.
series: [{
name: 'Target',
type: 'polygon',
data: [[153, 42], [149, 46], [149, 55], [152, 60]],
color: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get(),
enableMouseTracking: true
}],
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
http://jsfiddle.net/onhfLqdm/3/
As area is bounded by points so how can i hover area instead of points?
Update On hover on each polygon asker wants to show data coming from json.To do so in a div out of container please view this fiddle
In Tooltip One more option to show some info coming from json ,tooltip can be used.Put your data using some name like "someText" (as in my fiddle )and get it in formatter function of tooltip using
this.options.someText
See this fiddle for data in tooltiip
Old Answer:
plotOptions: {
series: {
events: {
mouseOver: function () {
$("#polygon").html('Moused over Event')
.css('color', 'green');
},
mouseOut: function () {
$("#polygon").html('Moused out Event')
.css('color', 'red');
}
}
}
}
Fiddle link is here