Develop Reference

How to have legends in Pie charts as data labels in HighCharts

I have a couple of questions while dealing with Pie Charts in High charts.
How to change the legend's shape apart from the circle.
I want to display legends in data labels prior to percentage values.
And also with an increase in data, data labels are not radical to the pie chart. How to fix this.
my chart options :
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.percentage:.1f} %'
},
showInLegend: true
},
},
series: [{
name: 'Brands',
colorByPoint: true,
dataLabels: {
connectorWidth : 0
},
showLegends: true,
data: [{
name: 'Chrome',
y: 61.41,
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}]
}]
});
my code pen
Would be grateful if I get an answer to any of my questions.

The API allows customizing the legend symbol by setting options like symbolRadius or symbolHeight.
Demo: https://jsfiddle.net/BlackLabel/1m98xgvr/
API: https://api.highcharts.com/highcharts/legend.symbolHeight
If you want to change the legend symbol to the custom png try to use this solution:
Custom Highcharts legend symbol
You can set the dataLabels.useHTML flag to true and use the dataLabes.formatter callback to customize the output which will be an outstanding HTML element.
Demo: https://jsfiddle.net/BlackLabel/2sog3znq/
Here I am not sure what do you have in mind - could you explain it more precisely?

Highcharts ignore skipped dates

I'm working on a heat map with a lot of dates, but I've now removed weekends from the data. Unfortunately, that had the side effect of adding blanks to the heat map.
I've tried the connecting nulls option to no avail: https://api.highcharts.com/highcharts/plotOptions.series.connectNulls
Also tried: showEmpty:false
And I'm aware of https://www.highcharts.com/demo/spline-irregular-time, but don't know if I can apply that here.
Here is a pic:
Ideally I would figure this out because I intend on thinning out the data further. For example I may remove every other day.
Here is the pertinent chart code:
{
...
xAxis: {
type: 'datetime',
labels: {
align: 'left',
x: 5,
y: 14,
format: '{value:%B}'
},
tickInterval: 30 * 24 * 3600 * 1000,
},
series: [{
boostThreshold: 100,
borderWidth: 0,
nullColor: '#EFEFEF',
colsize: 24 * 36e5, // one day
tooltip: {
headerFormat: '<b>Details</b><br/>',
pointFormat: 'Date: {point.x:%A, %b %e, %Y}<br/>Underlying Price: ${point.y}<br/>Positon Value:{point.positionvalue}<br/>NET:{point.net}<br/>ROI:{point.roi}%'
},
turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
}]
...
app.chart.config["series"][0]["data"] = chartData;
The chartData variable looks something like:
[{
net: -0.2
positionvalue: -0.54
roi: -30.3
value: -30.3
x: 1591329600000
y: 55
}]
If you need to see it in prod I can attach my url.
UPDATE:
Here is a fiddle:
https://jsfiddle.net/vo8syrhn/

I think that the only solution for this case is use the breaks feature. Notice that using it requires including the broken-axis module.
<script src="https://code.highcharts.com/modules/broken-axis.js"></script>
Demo: https://jsfiddle.net/BlackLabel/t72dfwz9/
API: https://api.highcharts.com/highcharts/xAxis.breaks

One way to do it is to omit the xAxis.type. You can see a demo on jsFiddle - https://jsfiddle.net/r32z7esd/ (note data for 2020-06-05 is missing)
html code
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="chart">
</div>
js
Highcharts.chart("chart", {
title: {
text: "chartTitle"
},
xAxis: {
categories: ['2020-06-06','2020-06-04','2020-06-03']
},
yAxis: [{
title: {
text: "yAxis1Title"
}
}],
series: [{type:'column',data:[3,4,7]}]
});

Highcharts marker alignment not matched with Axis gridlines

options passed like below:
var chartOptions = {
chart: {
backgroundColor: 'white',
type:'line'
},
title: {
text:null
},
xAxis: {
gridLineWidth:0.5,
gridLineColor:'#e1e1e1',
tickInterval:intervalPeriod,
tickWidth: 0,
type: 'datetime',
dateTimeLabelFormats: dateTimeLabelFormats
},
yAxis: {
gridLineWidth:0.5,
gridLineColor:'#e1e1e1',
allowDecimals:false,
tickAmount: 5,
title: {
text: null
}
},
tooltip:{
shared:true,
xDateFormat:'%e %b, %Y',
crosshairs:true
}
}

You need to have the same value for tickInterval and pointInterval in order to display tick synced with series' points. When points have irregular intervals, then you can use tickPositions array.
API Reference:
http://api.highcharts.com/highcharts/xAxis.tickInterval
http://api.highcharts.com/highcharts/plotOptions.series.pointInterval
http://api.highcharts.com/highcharts/xAxis.tickPositions
Example:
http://jsfiddle.net/zycwaexa/ - using the same tickInterval and pointInterval
http://jsfiddle.net/z7pnwtrs/ - using tickPositions

Grouping dynamic data in highcharts

I'm attempting to create a highchart populated by dynamic data that looks something similar to the following image:
Where the y-axis (technically just the x-axis with the inverted: true tag) is a list of people grouped by location. However, I'm having trouble displaying the data grouped by their locations with the locations being displayed also. The actual view isn't important, just that it neatly groups the data and displays the location.
All I've managed to do so far is simply sort the data and tag the location name to the end of the person, but that's not quite what I want:
I'm aware that this is a relatively easy thing to do with categories and data series, but the only examples of this i could find didn't involve dynamic data. Here is some of my code so far:
function loadChart() {
//calculate height based on number of users displayed, and width based on the panel body width
var chartHeight = users.length * 20 + 75;
var chartWidth = $('#InOutPanelViewId').width();
chart = Highcharts.chart('ChartViewId', {
chart: {
width: chartWidth,
height: chartHeight,
type: 'columnrange',
inverted: true,
spacingLeft: 0
},
title: {
text: null
},
xAxis: {
showEmpty: false,
title: null,
type: 'category',
labels: {
align: 'right',
format: '{value.User}',
style: {
color: 'black',
fontSize: '12pt'
}
}
},
yAxis: {
showEmpty: false,
title: '',
type: 'datetime',
dateTimeLabelFormats: {
second: '%I:%M %P',
minute: '%I:%M %P',
hour: '%I:%M %P',
day: '%I:%M %P',
week: '%I:%M %P',
month: '%I:%M %P',
year: '%I:%M %P'
},
min: startTime.valueOf(),
max: endTime.valueOf(),
plotLines: [{
color: 'grey',
value: time,
width: 1.5
}]
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [
{ name: "Data", borderWidth: 0, data: chartData }
],
tooltip: {
formatter: function () {
return '<b>' + this.point.jobcode + '</b><br>' + this.point.timespan + '<br>';
}
}
});
}
Where chartData currently looks like this:
chartData[chartData.length] = { name: user, low: displayStart.valueOf(), high: displayEnd.valueOf(), timespan: timeSpan, jobcode: value.JobCodeName, color: colour };
And is populated with dynamic data it pulls from an endpoint. The endpoint does also send back the location, so I'm wondering how I can use this structure and the location i'm sending back to group the data and display it nicely.
Any help is appreciated, thanks!

Highcharts data csv load

i'm having trouble displaying chart from my csv file.it doesn't plot chart. maybe my parser it is the problem. firebug says no major errors but i'm stuck i dont know how to make it work. please help..
this is how my csv looks like:
1437931522,30
1437931555,30.25
1437931768,30.25
1437931785,29.75
1437931802,30.25
1437932702,30.5
1437933601,29.75
1437933974,30
end of file is \n, but seems to not showing right here so I inserted extra enter
this is the code:
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: true
}
});
var mydata = [];
var times = [];
$.get('data.csv', function(data) {
// Split the lines
var lines = data.split('\n');
// Iterate over the lines and add categories or series
$.each(lines, function(lineNo, line) {
var items = line.split(',');
if(lineNo=>0)
{
times.push(new Date(items[0]*1000).toUTCString());
mydata.push(items[1])
}
});
});
$('#container').highcharts({
title: {
text: 'Temperature',
x: -20 //center
},
subtitle: {
text: 'test1',
x: -20
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%b %e, %Y',
year: '%Y'
},
categories: times
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Temp',
data: mydata
}]
});
});``
is it ok, to get csv just with 'data.csv' if it is in the same directory or I have to set entire url?
this ismy fiddle:
http://jsfiddle.net/skoky2/yw25z6ow/1/

You should use the following code in your main module
data: {
csv: csv
},
Ref: data-module

1) If you use datetime type of xAxis, you should no use categories. You can define tickPositions
2) Point value should be number not string, so replace:
mydata.push(items[1])
with
mydata.push(parseFloat(items[1]))

i managed to get it work. but I noticed that this chart works only in IE 8, not in firefox or chrome. firefox with ie tab aslo works