I'm using highcharts with dynamically generated data and plot names. (Usually between 4 and 8 data points but there will be 2 with small numbers.)
Some of these are a bit long and cause the pie chart to be tiny so I set the plot option style width to force them to wrap and span multiple lines.
However on some of my charts the labels are overlapping and have no idea how to fix it.
Does anyone have any ideas?
http://jsfiddle.net/d600burton/TkPBq/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: 1,
plotShadow: false
},
subtitle: {
text: 'Drag the handle in the lower right to resize'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
minSize: 1,
dataLabels: {
style: {
width: '100px'
},
enabled: true,
color: '#000000',
format: '<b>{point.name}</b>: {percentage:.2f} %'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
{name: "On Hire", y: 2884},
{name: "Collection Note", y: 674},
{name: "Off Hire Not Confirmed", y: 23},
{name: "Goods In", y: 41}
]
}]
});
Connectors and datalables are generated idenpendently, so in case when you set small with, connectors are not "moved". In other words I advice to consider width modification.
Related
i have a highstock chart with multiple series, each one has it's own tooltip(shared:false), after hovering mouse, a label appear on xAxis, how to get ride of it?
{
xAxis: {
crosshair: false
},
tooltip: {
useHTML: true,
shadow: false,
borderRadius: 0,
borderColor: "transparent",
backgroundColor: "transparent",
borderWidth: 0,
},
plotOptions: {
series: {
turboThreshold: 0,
},
states: {
hover: {
enabled: false,
},
},
},
series: [ {
type: "line",
name: series[0].name,
data: [...],
color: series[0].color,
tooltip: {
pointFormatter() {
return `<span>tooltip1:xxx</span>`;
},
},
},
{
type: "line",
data: [...],
name: series[1].name,
color: series[1].color,
pointFormatter() {
return `<span>tooltip1:xxx</span>`;
},
}],
}
in here i put a sample of what i mean and a picture:
js fiddle
From Highcharts API:
split: boolean Since 5.0.0
Split the tooltip into one label per series, with the header close to
the axis. This is recommended over shared tooltips for charts with
multiple line series, generally making them easier to read. This
option takes precedence over tooltip.shared.
To get rid of the header set headerFormat to an empty string.
tooltip: {
headerFormat: ''
}
Live demo: https://jsfiddle.net/BlackLabel/bc467dmo/
API Reference: https://api.highcharts.com/highstock/tooltip.headerFormat
I am trying to make a scatter plot with two serie names (subcategory).
This example from highcharts is my starting point.
In this example, you only have two categories, namely female and male. I would like to see the name of the female/male in the tooltip. Not in the legend!
In my example jsfiddle I added four names in the data and tooltip
I understand that this is not the correct way, but I would like to clarify what I want to achieve. Does anyone know how to process this correctly, so that there are still two categories in the legend (female/male), but in the tooltip also the name of the female/male.
Thank you so much already!
Highcharts.chart('container', {
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Height Versus Weight of 507 Individuals by Gender'
},
subtitle: {
text: 'Source: Heinz 2003'
},
xAxis: {
title: {
enabled: true,
text: 'Height (cm)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Weight (kg)'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
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: 'name: (), {point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'Female',
color: 'rgba(223, 83, 83, .5)',
data: [{name: 'Anna', [161.2, 51.6]}, {name: 'Clair',[167.5, 59.0]]
}, {
name: 'Male',
color: 'rgba(119, 152, 191, .5)',
data: [{name: 'James',[174.0, 65.6], {name: 'Peet',[175.3, 71.8]]
}]
});
You have a fair number of errors with brackets and curly brackets, where there are too many or few brackets. Too many for me to point them all out, but mainly around the section area.
However, you need to define the scatter plot coordinates as x, and y when you define a name for the series, like this:
series: [{
name: 'Female',
data: [{
name: 'Anna'
x: 161.2,
y: 51.6
},
...
]
}
...
]
Also, to show the name of the datapoint (i.e. the person), you can use the following tooltip formatter:
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: 'Name: {point.name}, {point.x} cm, {point.y} kg'
}
Highcharts API on scatter data: http://api.highcharts.com/highcharts/series.scatter.data
Working example using your data: http://jsfiddle.net/ewolden/0uc1g8b5/2/
It seems like when I enable crosshair for the yAxis, only the last series defined get a crosshair. I would like all of them to be crosshaired.
(.. and I would love if they also had the color (or preferably a darker variant) as the series.)
You can create an y axis per series, link those additional axes to the first one and define a specific crosshair in each axis - then link series with a specific axis and you will get an seperate customizable crosshair per series.
Highcharts.chart('container', {
yAxis: [{
gridLineWidth: 0,
crosshair: {
width: 2,
color: Highcharts.getOptions().colors[0]
}
}, {
linkedTo: 0,
crosshair: {
width: 2,
color: Highcharts.getOptions().colors[1]
},
visible: false
}],
tooltip: {
shared: true
},
series: [{
data: data.slice()
}, {
yAxis: 1,
data: data.reverse()
}]
});
example: http://jsfiddle.net/absuLu6h/
The data labels when using 3d Pie Chart displays in an incorrect manner.
I only have two slices and most of the times, the labels of one slice ends up being in the space of other slice. See http://jsfiddle.net/tn036sak/
I do want to use the distance property so it does not show labels outside of the pie chart.
This is my code -
$(function () {
$('#container').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 65,
beta: 0
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
distance:-40,
enabled: true,
format: '{point.name}'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 10.0],
['Chrome', 90]
]
}]
});
});
Please suggest how the labels can be shown on the respective slice.
I've encounted a problem when updating data of pie chart by clicking on a button - the legend and title overlap pie chart. But what's interesting is that when I resize the browser, for example, maximize the browser, position of title and legend go back normal.
Problem example is shown at http://jsfiddle.net/HmmeX/3/.
Data is updated by
$('button').click(function() {
// var chart = $('#container').highcharts();
chart.setTitle({
text: 'Browser market shares at a specific website, 2010'
});
chart.series[0].setData(adata, true);/*update({
data: adata});*/
});
That looks like a bug to me. You can work around it by adding size : 300 to your pie options.
chart = new Highcharts.Chart({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
renderTo: 'container',
type: 'pie'
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
legend: {
verticalAlign: 'bottom'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true,
size:300
}
},
series: [{
name: 'Browser share',
data: []
}]
});
http://jsfiddle.net/xNmLd/