I'm trying to create a highstock chart which has some of the points flagged with a circle. All the points in the chart have a tooltip as you hover over the chart.
However the tooltip for the points that have a flag should be one from the flag. I've been trying to see if highstock has an API through which I can say whether tooltip should be displayed on not based on the condition that the point has a flag or not. However, I'm stuck on how to find if a point has a flag or not.
Here a fiddle of my example : http://jsfiddle.net/ulhas87/WSDza/
{
rangeSelector: {
selected: 1
},
title: {
text: 'USDtoEURexchangerate'
},
yAxis: {
title: {
text: 'Exchangerate'
}
},
tooltip: {
formatter: function(){
console.log(this);
if(this.point){
//if this point has a flag then return false
//else return the tooltip for this point
return this.y;
}else{
//this is a flag - hence return the flag tooltip
return this.y;
}
},
},
series: [
{
name: 'USDtoEUR',
data: data,
id: 'dataseries',
tooltip: {
valueDecimals: 4
},
followPointer: false
},
{
type: 'flags',
data: [
{
x: Date.UTC(2011,
1,
14),
title: '',
text: 'Shape: "circle"'
},
{
x: Date.UTC(2011,
3,
28),
title: '',
text: 'Shape: "circle"'
}
],
onSeries: 'dataseries',
shape: 'circle',
width: 1,
height: 1,
y: -4,
states: {
hover: {
fillColor: '#395C84'//darker
}
},
point: {
events: {
mouseOver: function(){
console.log(this);
}
}
},
zIndex: 10
},
{
type: 'flags',
data: [
{
x: Date.UTC(2011,
2,
10),
title: 'C',
text: 'Shape: "flag"'
},
{
x: Date.UTC(2011,
3,
11),
title: 'C',
text: 'Shape: "flag"'
}
],
color: '#5F86B3',
fillColor: '#5F86B3',
onSeries: 'dataseries',
width: 16,
style: {
//textstylecolor: 'white'
},
states: {
hover: {
fillColor: '#395C84'//darker
}
},
marker: {
fillColor: '#000000'
}
}
]
}
Appreciate any help. Thanks
The problem is that your cherries are not the same as you are using for a flags. See updated version: http://jsfiddle.net/WSDza/3/
Also, I advice to set lower hideDelay to observer that point doesn't have tooltip.
Related
I have a JSON array like this:
chart_data = [
{category: 'A', per: '0.74', total: 10294, in: 5651, out: 5661},
{category: 'B', per: '0.72', total: 10294, in: 5556, out: 7751},
{category: 'C', per: '0.68', total: 10294, in: 5598, out: 5991},
{category: 'D', per: '0.54', total: 10294, in: 6551, out: 5001}
]
now I am showing the data in the column chart where I am using per column chart data where in Highcharts the only tooltip visible is "per" but I want to show "total, in, out" all of them in the tooltip.
Here's my HighChart Code:
plotColumnChart(chart_data:any, chart_config: any){
let columnChartSeries = [];
let categories = [];
let columnChartData = {
exporting: {
chartOptions: { // specific options for the exported image
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
}
},
fallbackToExportServer: false
},
chart: {
type: 'column',
borderColor: '#c1e1c182',
borderWidth: 1,
borderRadius: 5,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
title: {
text: chart_config['name'],
x: -20,
style: {
color: '#0D6ABF',
fontWeight: 'bold'
}
},
credits: {
enabled: false
},
legend: {
enabled: false,
},
xAxis: {
categories: chart_data.map(function(point:any){
return [(<any>Object).values(point)[0]]
}),
title: {
text: null
},
gridLineColor: '#ffffff',
},
yAxis: {
min: 0,
tickInterval: 20,
max:100,
gridLineColor: '#ffffff',
title: {
text: null,
align: null
},
labels: {
overflow: 'justify'
}
},
tooltip: {
shared: false,
backgroundColor: 'black',
borderColor: 'black',
borderRadius: 10,
style: {
color: 'white'
},
useHTML: true,
borderWidth: 3,
headerFormat: '<b style="color: #fff;">{point.x}</b><br/>',
formatter: function() {
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
distance: "-80%",
pointFormat: '{point.y}%',
},
},
column: {
pointPadding: 0.5,
borderWidth: 0,
showInLegend: true,
zones:[{
value: chart_config['color-format'][0], // Values up to 50 (not including) ...
color: '#FA5F55' // ... have the this color.
},
{
value: chart_config['color-format'][1], // Values up to 60/70 (not including) ...
color: '#FFBF00' // ... have the this color.
},
{
color: '#98FB98' // Values greater than 70 ... have the this color.
}
],
}
},
series: [
{
name: '', //chart_config['name'],
color: '', //'#98FB98',
pointWidth: 20,
data: chart_data.map(function(point:any){
return [
Number(
(
parseFloat(
(<any>Object).values(point)[1]
)*100
).toFixed(0)
)
]
})
},
]
} as any;
Highcharts.chart(chart_config['id'], columnChartData);
}
And chart_config = {"id": 'column-chart', "name": 'ABC', 'color-format': [50, 70]};
Can anybody help me to achieve this by writing a formatter function for this?
There is no possibility to get other values from the chart level if you don't provide them in the data. In your example, only "per" value is passed to the series.data . After parsing data to the relevant format, you will also need to define series.keys in order to have access to these options.
//Data parsing to the two dimensional array
let new_chart_data = [];
chart_data.forEach(data => {
data.per = Number(data.per)
new_chart_data.push([data.category, data.per, data.total, data.in, data.out])
})
//Chart
Highcharts.chart('container', {
tooltip: {
pointFormatter: function() {
console.log(this.options)
return `<b>Per:</b> ${this.y}</br><b>Total:</b> ${this.total}</br><b>In:</b> ${this.in}</br><b>Out:</b> ${this.out}</br>`
}
},
series: [{
type: 'column',
keys: ['name', 'y', 'total', 'in', 'out'],
pointWidth: 20,
data: new_chart_data
}]
});
API Reference:
https://api.highcharts.com/highcharts/series.column.keys
Demo:
https://jsfiddle.net/BlackLabel/3dh2m79c/
Something like this?
public formatter(row): string {
return row ? `${row.per}, ${row.in}, ${row.out}` : null;
}
I have a stacked column/scatter chart with some dataLabels off to one side. The issue I am facing is that when my two markers begin to get close to one another, their dataLabels overlap
I need to always show both labels, so is there a way to detect when labels are overlapping and move the bottom one down by adjusting its y value based on how much overlap there is?
sample fiddle of the issue
Highcharts.chart('container', {
chart: {
type: 'column',
width: 500
},
title: {
text: 'Stacked column chart'
},
xAxis: {
visible: false,
},
yAxis: {
min: 0,
visible: false,
title: {
},
},
legend: {
layout:"vertical",
align: "right",
verticalAlign: "bottom",
itemMarginTop: 15,
y: -10,
x: -50
},
tooltip: {
enabled: false,
},
plotOptions: {
scatter: {
marker: {
symbol: "triangle",
},
dataLabels: {
enabled: true,
x: -80,
y: 50,
allowOverlap: true,
useHTML: true,
}
},
column: {
pointWidth: 70,
stacking: 'normal',
dataLabels: {
enabled: false
}
}
},
series: [{
name: '',
data: [100],
color: "#ededed"
}, {
name: '',
data: [500]
}, {
name: '',
data: [400]
},
{
type: "scatter",
data: [1000],
color: "#000",
dataLabels: {
formatter: function(){
return "<div class='label-text'>Your goal of <br/>$"+ this.y +"<br/>text</div>"
},
}
},
{
type: "scatter",
data: [900],
color: "#000",
dataLabels: {
formatter: function(){
return "<div class='label-text'>You are here <br/>$"+ this.y +"<br/>text</div>"
},
}
}]
});
You can correct data-labels positions by using the attr method on their SVG elements.
For example:
chart: {
events: {
render: function() {
const series = this.series;
const dl1 = series[3].points[0].dataLabel;
const dl2 = series[4].points[0].dataLabel;
if (dl1.y + dl1.height > dl2.y) {
dl2.attr({
y: dl1.y + dl1.height
});
}
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/5Lmh4owb/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGElement.html#attr
https://api.highcharts.com/highcharts/chart.events.render
A smoother line is needed (the line should rise smoothly and evenly), but the values should not change. Is it possible to build a more straight line without changing the values?
Screen with explanations: http://prntscr.com/qudf96
And my code:
<script>
function reDrawCalc(gdata, gcurr, nums = 2) {
Highcharts.chart('container', {
chart: {
height: 400,
type: 'area',
margin: [20, 0, 20, 0]
},
title: {
text: null
},
subtitle: {
text: null
},
exporting: {
enabled: false
},
xAxis: {
gridLineWidth: 1,
categories: ['One', 'Two', 'Three', 'Four', 'Five']
},
yAxis: {
gridLineWidth: 0,
},
tooltip: {
enabled: false,
crosshairs: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
inside: false,
style: {
fontFamily: 'Rubik, sans-serif',
textTransform: 'uppercase',
fontSize: 'none',
fontWeight: 'normal',
textShadow: 'none'
},
formatter: function() {
return '<div class="chitem-time">'+ this.x+'</div>'
+'<div class="chitem-val">'+ Highcharts.numberFormat(this.y,nums)+'<sup>'+gcurr+'</sup></div>';
}
}
}
},
series: [{
type: 'areaspline',
data: gdata,
lineWidth: 5,
color: '#f0c997',
fillColor:'transparent'
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
chart: {
height: 350,
type: 'area',
margin: [20, 0, 20, 0]
},
series: [{
type: 'areaspline',
data: gdata,
lineWidth: 3,
color: '#f0c997',
fillColor:'transparent'
}],
}
}]
}
});
}
</script>
Is it possible to do it? And how to modify my code for it?
Thank you very much in advance!
As I mentioned in the comment current line shape is at it is because of the points positions on the chart. If you don't need to keep points actual positions the solution which you can use is to use the dummy data for the points and use the correct one in the dataLabels. See:
Demo: https://jsfiddle.net/BlackLabel/fshx3n50/
data: [{
y: 5,
z: 0.20
}, {
y: 10,
z: 1.40
}, {
y: 18,
z: 6.20
}, {
y: 30,
z: 18.00
}, {
y: 50,
z: 73.00
}],
I also changed the formatter function to display the z value in dataLabel:
formatter: function() {
return '<div class="chitem-time">' + this.x + '</div>' +
'<div class="chitem-val">' + Highcharts.numberFormat(this.point.z) + '<sup>REM</sup></div>';
}
I create a scatter chart and will add a label on a box that has been specified, I've managed to make his label, but when her screen minimized, do not adjust the position of its labels.
labels: {
items : [
{
html : 'Prioritas 4',
style : {
left : '380%',
top : '60px',
fontSize : '10px'
}
},
{
html : 'Prioritas 3',
style : {
left : '660%',
top : '60px',
fontSize : '10px'
}
}
]
},
and my complete code is
$('#ketenagalistrikan-pembenahan-layanan-chart').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Pembenahan Dimensi Layanan'
},
subtitle: {
text: 'Source: rad-research.com'
},
labels: {
items : [
{
html : 'Prioritas 4',
style : {
left : '380%',
top : '60px',
fontSize : '10px'
}
},
{
html : 'Prioritas 3',
style : {
left : '660%',
top : '60px',
fontSize : '10px'
}
}
]
},
xAxis: {
title: {
enabled: true,
text: 'Kepentingan'
},
min: -0.5,
max: 39.3,
startOnTick: true,
endOnTick: true,
showLastLabel: true,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 12.7,
zIndex: 3
},{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 26,
zIndex: 3
},{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 39.3,
zIndex: 3
}]
},
yAxis: {
title: {
text: 'Kepuasan'
},
tickInterval: 8.9,
startOnTick: true,
endOnTick: true,
showLastLabel: true,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 46.2,
zIndex: 3
},{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 55.2,
zIndex: 3
}]
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'Marketing',
data: [[8.75, 45.8]]
},{
name: 'Sales',
data: [[15.0, 43.6]]
},{
name: 'Aktivasi/Instalasi',
data: [[-0.3, 53.2]]
},{
name: 'Contact Center',
data: [[1, 52.2]]
},{
name: 'Customer Account',
data: [[-0.3, 60.1]]
},{
name: 'Field Support',
data: [[30.5, 40.3]]
},{
name: 'Billing',
data: [[37.5, 59.2]]
}]
});
Labels in this case are static, so unless you manually redraw them they will will not be responsive.
I prefer another way - you can use renderer and have control rendered objects completely. With the help axis.toPixels() method you can easily make them responsive and stays in the fixed value.
Create item on load event:
load: function () {
this.customTexts = [];
var text = this.renderer.text(
'Responsive text',
this.xAxis[0].toPixels(15),
this.yAxis[0].toPixels(50)
)
.css({
fontSize: '10px'
})
.add();
this.customTexts.push(text);
},
Redraw the item on redraw event:
redraw: function () {
this.customTexts[0].attr({
x: this.xAxis[0].toPixels(15),
y: this.yAxis[0].toPixels(50)
});
}
Example: http://jsfiddle.net/hfev4w7c/
With HighCharts 3.0, it is now possible to indicate to colors above and below one threshold. Like this example :
http://jsfiddle.net/highcharts/YWVHx/
Following code :
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function(data) {
$('#container').highcharts({
chart: {
type: 'arearange'
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: data,
color: '#FF0000',
negativeColor: '#0088FF'
}]
});
});
});
Is it possible to have another threshold with a third color, like this for example :
Thanks in advance for your help.
It actually is possible if you don't mind plotting the data twice.
$('#container').highcharts({
chart: {
type: 'arearange'
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
threshold : 0,
data: data,
color: 'orange',
negativeColor: 'blue'
},
{
name: 'Temperatures',
threshold : 10,
data: data,
color: 'red',
negativeColor: 'transparent'
}]
});
});
http://jsfiddle.net/YWVHx/97/
A feature to solve this without "hacks" was added in Highcharts 4.1.0 (February 2015), called zones (API). The given problem can be solved like this, using zones:
plotOptions: {
series: {
zones: [{
value: 0, // Values up to 0 (not including) ...
color: 'blue' // ... have the color blue
},{
value: 10, // Values up to 10 (not including) ...
color: 'orange' // ... have the color orange
},{
color: 'red' // Values from 10 (including) and up have the color red
}]
}
}
See this JSFiddle demonstration of how it looks.
Unfortunately this option is not possible, but you can request your suggestion in http://highcharts.uservoice.com and vote for it.
By the way, I can try use a plotLine, like this:
yAxis: {
title: {
text: 'My Chart'
},
plotLines: [{
id: 'limit-min',
dashStyle: 'ShortDash',
width: 2,
value: 80,
zIndex: 0,
label : {
text : '80% limit'
}
}, {
id: 'limit-max',
color: '#008000',
dashStyle: 'ShortDash',
width: 2,
value: 90,
zIndex: 0,
label : {
text : '90% limit'
}
}]
},