I have a map of the US and its 600 x 400. How do I force it to use the Abbreviated State names which I see in the examples but am unable to reproduce in my own code.
I'm using the below code with some sample data to show the format of the code I'm passing. I'm having to parse the data out of a larger json response.
var data = [{"code":"AK","value":225}, {...} ];
This is the map:
$('#ha-worst-map-1').highcharts('Map', {
title : {
text : result.data[1][2] + ': ' + result.data[1][4]
},
subtitle : {
text : 'stuff and things'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'top'
}
},
colorAxis: {
min: 0
},
credits: {
text: '',
href: ''
},
series : [{
data : data,
mapData: Highcharts.maps['countries/us/us-all'],
joinBy: ['postal-code', 'code'],
name: 'metric',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
},
tooltip: {
valueSuffix: ''
}
}, {
name: 'Separators',
type: 'mapline',
data: Highcharts.geojson(Highcharts.maps['countries/us/us-all'], 'mapline'),
color: 'silver',
showInLegend: true,
enableMouseTracking: true
}]
});
Related
I am not able to set the color in tree map based on a value. value is coming dynamically from api response. Here is how I am trying to achieve same but id is not working. It is a drilldown tree map.if anyone can help me. I want to set the colors as per the colorvalue.
function treeMap(containerID, jsonData, titleText, subTitleText, type, colorValue) {
Highcharts.AST.allowedAttributes.push('onmousedown')
treeChart = Highcharts.chart(containerID, {
colorAxis: {
minColor: Highcharts.getOptions().colors[9],
maxColor: '#FFFFFF',
},
plotOptions: {
series: {
turboThreshold: 10000
}
},
series: [{
type: "treemap",
allowDrillToNode: true,
layoutAlgorithm: 'squarified',
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true
},
borderWidth: 3
}],
name: titleText,
data: jsonData[0].concat(jsonData[1]),
colorKey:colorValue
}],
tooltip: {
useHTML: true,
style: {
pointerEvents: 'auto'
},
stickOnContact: true,
pointFormatter: function() {
return chartToolTip(this, type);
}
},
title: {
text: titleText
},
subtitle: {
text: subTitleText
}
});
}
As API says, series.colorKey is a string that determinates what data value should be used to calculate point color. Whereas colorValue should be passed with data. I hope the following, simplified example will clarify it:
Example code:
let colorValue = [1, 5, 10];
Highcharts.chart('container', {
colorAxis: {
minColor: '#FFF000',
maxColor: '#0000FF'
},
series: [{
type: 'treemap',
colorKey: 'colorValue',
data: [{
value: 4,
colorValue: colorValue[0]
}, {
value: 3,
colorValue: colorValue[1]
}, {
value: 2,
colorValue: colorValue[1]
}, {
value: 1,
colorValue: colorValue[2]
}]
}]
});
API Reference:
https://api.highcharts.com/highcharts/plotOptions.treemap.colorKey
Demo:
https://jsfiddle.net/BlackLabel/wa4h0cgk/
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
How to static values in stacked bar chart. Below is the code i am using
$(function () {
Highcharts.chart('container5', {
chart: {
type: 'bar'
},
title: {
text: null
},
xAxis: {
categories: [''],
lineWidth: 0, // STEP TWO
tickWidth: 0, // STEP ONE
labels: {
enabled: false
},
},
yAxis: {
min: 0,
title: {
text: ' '
},
labels: {
enabled: false,//default is true
},
gridLineWidth: 0,
minorGridLineWidth: 0,
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
},
column: { //at the top bar chart values
dataLabels: {
enabled: true,
crop: false,
overflow: 'none'
}
},
bar: {
dataLabels: {
enabled: true,
distance: -50,
formatter: function () {
var dlabel = this.series.name + '<br/>';
// dlabel += Math.round(this.percentage*100)/100 + ' %';
return dlabel
},
style: {
color: 'white',
},
},
}
},
series: [{
showInLegend: false,
name: '20',
data: [20]
}, {
showInLegend: false,
name: '20',
data: [20]
}, {
showInLegend: false,
name: '20',
data: [20]
}, {
showInLegend: false,
name: '20',
data: [20]
}, {
showInLegend: false,
name: '20',
data: [20]
}]
});
});
It is the output and refer the attachment.
In the screenshot marked in red rectangular box, want to show the values. Refer the screenshot attached below
Original Screenshot (sample one)
Like this screenshot i need to show the values at the top which can be seen at the top.
You can define multiple data labels and position one of them at the top of the column, for example:
series: [{
...,
dataLabels: [{}, {
format: '20yrs',
y: -100
}]
}, ...]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4909/
API Reference: https://api.highcharts.com/highcharts/series.bar.dataLabels
Added,
y: -100 to the bar.dataLabel option (before the formatter) .
Image Output:
enter image description here
At the top of the label some of the name is missing:
5-9yrs & 15-20yrs ..printing alternatively
and also inside the stacked bar chart, values "20" not get displayed.
I have a high chart and my data labels say Interest and balance when I click the segments of the pie chart it shows the value of 4 752.6 and I want it to show 4,752.60
{
lang: {
thousandsSep: ','
},
tooltip: {
pointFormat: '<span>{point.y:,.1f}</span>'
},
chart: {
type: 'pie'
},
title: {
text: ''
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: false,
dataLabels: {
enabled: true,
}
}
},
series: [
{
type: 'pie',
name: 'Line 1',
data: [
{ name: 'Balance', color: '#0000FF', y: balance, dataLabels: 'Balance' },
{ name: 'Interest', color: "#FF0000", y: interest }
]
}
]
}
You need to set the thousandsSep property in setOptions method:
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
Live demo: http://jsfiddle.net/BlackLabel/vwpfe429/
API Reference: https://api.highcharts.com/highcharts/lang
This my map configuration
chart = Highcharts.mapChart('container', {
title: {
text: ''
},
//This enables the zooming functionality
mapNavigation: {
enabled: true
},
credits: {
enabled: false
},
tooltip: {
pointFormat:
'Server Name : {point.source_host}<br>' +
'{point.Hover}<br>' +
'{point.trueVUEStatus}'
},
xAxis: {
crosshair: {
zIndex: 5,
dashStyle: 'dot',
snap: false,
color: 'gray'
}
},
yAxis: {
crosshair: {
zIndex: 5,
dashStyle: 'dot',
snap: false,
color: 'gray'
}
},
plotOptions: {
series: {
//allowPointSelect: true,
point: {
events: {
click: function (event) {
//location.href = '?' + event.point.serverName + '#serverdetailsview';
//alert('clicked '+ event.point.source_host);
window.open('index.html?' + event.point.source_host + "#serverdetailsview&store-no=" + event.point.storeNum, '_blank');
//http://localhost:10080/dashboard/index.html?ME629ASRFI21#serverdetailsview
}
}
}
}
},
series: [{
name: 'Basemap',
mapData: map,
borderColor: '#606060',
nullColor: 'rgba(200, 200, 200, 0.2)',
showInLegend: false
}, {
name: 'Separators',
type: 'mapline',
data: H.geojson(map, 'mapline'),
color: '#101010',
enableMouseTracking: false,
showInLegend: false
}, {
showInLegend: false,
type: 'mapbubble',
dataLabels: {
enabled: true,
format: '{point.storeNum}',
style:{color:"white"}
},
name: 'Cities1',
data: normaljson,
minsize: '1%',
maxSize: '4%',
color: '#00a65a'
},{
showInLegend: false,
type: 'mapbubble',
dataLabels: {
enabled: true,
format: '{point.storeNum}',
style:{color:"white"}
},
name: 'Cities2',
data: warnjson,
minsize: '1%',
maxSize: '4%',
color: '#f39c12'
},
{
showInLegend: false,
type: 'mapbubble',
dataLabels: {
enabled: true,
format: '{point.storeNum}',
style:{color:"white"}
},
name: 'Cities3',
data: errorjson,
minsize: '1%',
maxSize: '4%',
color: '#dd4b39'
}]
});
Just after this I am calling setData()
However, the bubble is not drawn on map
var pt = {"source_host":"xcxxxx","lat":26.3685,"lon":-80.1344,"serverIP":"NA","store":"Bloomingdales","storeNum":"2","status":"green"};
chart.series[2].setData([pt]);
It seems that you didn't include z property (value of the bubble) in your point's JSON (https://api.highcharts.com/highmaps/series.mapbubble.data.z).
Bubble is rendering fine after I added it: http://jsfiddle.net/BlackLabel/ktha1nmz/