data labels overlapping is a tricky problem when areas of the chart are crowded.
Let's look here: http://jsfiddle.net/zpd88mt7/1/
HTML
<body>
<div id="container" class="chart_container" style="width:800px; height:400px;"></div>
</body>
JS
var chart_options = {
chart: {
renderTo: 'container',
type: 'scatter',
zoomType: 'xy'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
align: 'center',
rotation: 0,
x: 0,
y: -2,
formatter: function() {
return this.point.name;
}
},
marker: {symbol: 'circle'}
}
},
series: [
{
id: 'volumes',
lineWidth: 0,
index: 10,
marker: {
enabled: true,
radius: 4
},
data: [
{x: 6798, y: 770, name: '01-XXXXXXXXX', id: '01'},
{x: 7934, y: 1350, name: '02-XXXXXXXXX', id: '02'},
{x: 7516, y: 926, name: '03-XXXXXXXXX', id: '03'},
{x: 7143, y: 907, name: '04-XXXXXXXXX', id: '04'},
{x: 7741, y: 1188, name: '05-XXXXXXXXX', id: '05'},
{x: 3449, y: 1121, name: '06-XXXXXXXXX', id: '06'},
{x: 7542, y: 917, name: '07-XXXXXXXXX', id: '07'},
{x: 8634, y: 1124, name: '08-XXXXXXXXX', id: '08'},
{x: 7986, y: 1132, name: '09-XXXXXXXXX', id: '09'},
{x: 9311, y: 1261, name: '10-XXXXXXXXX', id: '10'},
{x: 7681, y: 552, name: '11-XXXXXXXXX', id: '11'},
{x: 7665, y: 1148, name: '12-XXXXXXXXX', id: '12'},
{x: 8024, y: 889, name: '13-XXXXXXXXX', id: '13'},
{x: 8882, y: 1278, name: '14-XXXXXXXXX', id: '14'},
{x: 7164, y: 1015, name: '15-XXXXXXXXX', id: '15'}
]
}
]
}
var chart;
$(function() {
chart = new Highcharts.Chart(chart_options);
}
);
A good solution could be iterating on labels and moving them upward (or elsewhere) in a free nearby position and connect them to their dot with a line. But it looks like something needing a good amount of time and effort.
Do you know if this has already been solved?
Maybe Highcharts developers are planning something on this side? Probably this is affecting many Highcharts users.
Related
New to Highcharts, trying to generate waterfall chart with stacking only on intermediate stack. (image below)
Please help.
enter image description here
You should be able to achieve something like this by adding these stacking columns as an additional series to the waterfall chart. I think that everything is clearly showed in the demo.
Demo: https://jsfiddle.net/BlackLabel/tmyrk21f/
{
type: 'column',
pointPadding: 0,
stacking: 'normal',
data: [
// First stack
{
y: 50000,
x: 0,
color: 'red'
}, {
y: 50000,
x: 0,
color: 'orange'
}, {
y: 20000,
x: 0,
},
// Second stack
{
y: 500000,
x: 3,
color: 'red'
}, {
y: 400000,
x: 3,
color: 'orange'
}, {
y: 20000,
x: 3,
},
// Third stack
{
y: 145000,
x: 6,
color: 'red'
}, {
y: 100000,
x: 6,
color: 'orange'
}, {
y: 100000,
x: 6,
}
]
}
API: https://api.highcharts.com/highcharts/series.column.groupPadding
API: https://api.highcharts.com/highcharts/series.line.stacking
I have create graph 3 level drilldown and want to show legend of 3rd level follow with color.
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
labels: {
rotation: -45,
align: "right",
y: 30,
},
type: "category",
tickWidth: 0
},
yAxis: {
title: {
text: 'Total fruit consumption'
}
},
legend: {
enabled: true,
itemStyle: {
fontSize:'10px'
},
align: 'right',
verticalAlign: 'middle',
layout: 'vertical',
reversed:true
},
plotOptions: {
series: {
cropThreshold: 1000,
animation: {
duration: 300
},
cursor: 'pointer',
point: {
events: {
click: function () {
if(this.id)
{
alert(this.id);
}
}
}
}
},
column: {
cropThreshold: 1000,
minPointLength: 3,
animation: false,
stacking: 'normal'
}
},
series: [{
index: 0,
name: 'Tippers',
turboThreshold: 0,
cropThreshold: Infinity,
data: [{
name:'01-Feb-2018',
colorByPoint:true,
y:3,
drilldown:'Tippers-1-2-2018'
}]
}],
drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none',
color: 'black',
fontWeight: 'normal'
},
series: [{
name: '01-Feb-2018',
id: 'Tippers-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: 'psb04221',
y: 1,
drilldown:'psb04221/Tippers-1-2-2018'
},{
name: 'rvd910939',
y: 2,
drilldown:'rvd910939/Tippers-1-2-2018'
},]
},{
name: '01-Feb-2018',
id: 'Trucks-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: 'rvd910939',
y: 2,
drilldown:'rvd910939/Trucks-1-2-2018'
},{
name: 'sks913031',
y: 1,
drilldown:'sks913031/Trucks-1-2-2018'
},]
},{
name: 'psb04221 / Tippers 1-February-2018',
id: 'psb04221/Tippers-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: '01-February-2018-44',
id: '44',
y: 1,
type_legend: 'green',
color:'green'
},]
},{
name: 'rvd910939 / Tippers 1-February-2018',
id: 'rvd910939/Tippers-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: '01-February-2018-21',
id: '21',
y: 1,
type_legend: 'green',
color:'green'
},{
name: '01-February-2018-25',
id: '25',
y: 1,
type_legend: 'yellow',
color:'yellow'
},{
name: '01-February-2018-27',
id: '27',
y: 1,
type_legend: 'green',
color:'green'
},]
},{
name: 'rvd910939 / Trucks 1-February-2018',
id: 'rvd910939/Trucks-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: '01-February-2018-13',
id: '13',
y: 1,
type_legend: 'red',
color:'red'
},{
name: '01-February-2018-26',
id: '26',
y: 1,
type_legend: 'green',
color:'green'
},]
},{
name: 'sks913031 / Trucks 1-February-2018',
id: 'sks913031/Trucks-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: '01-February-2018-22',
id: '22',
y: 1,
type_legend: 'yellow',
color:'yellow'
},{
name: '01-February-2018-23',
id: '23',
y: 1,
type_legend: 'green',
color:'green'
},]
}]
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
1st drilldown legend show date is correct
2nd drilldown I want to show legend users
3rd drilldown I want to show legend for color filter
Please help me to add legend for show legend filter by color Red , Green and Blue of 3rd drilldown like this image : 3rd Drilldown
I have resolved problem by answer of ppotaczek.
In your example, the third level of drilldown is one series, that is why the legend show only one item. If you want to have multiple legend items on drilldown, you have to have multiple series. You can use drilldown event and addSeriesAsDrilldown method, like in the example below to achieve needed result.
Live demo: http://jsfiddle.net/BlackLabel/amg8234t/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Chart#addSeriesAsDrilldown
https://api.highcharts.com/highcharts/chart.events.drilldown
Best regards!
Thank you so much.
I'm new at Highcharts. I'm trying to create a Drilldown Bubble Chart.
I took the basic column drilldown as a starting point,
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/drilldown/basic/
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
and edited it a bit, to get this,
http://jsfiddle.net/Slate_Shannon/kdwa9x7v/1/
$(function() {
$('#container').highcharts({
chart: {
type: 'bubble'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'linear'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
x: 4,
y: 5,
z: 10,
drilldown: 'animals'
}, {
name: 'Fruits',
x: 14,
y: 20,
z: 20,
drilldown: 'fruits'
}, {
name: 'Cars',
x: 8,
y: 9,
z: 7,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', x: 5, y: 9, z: 7],
['Dogs', x: 8, y: 8, z: 9],
['Cows', x: 1, y: 5, z: 2],
['Sheep', x: 4, y: 7, z: 2],
['Pigs', x: 4, y: 5, z: 7]
]
}, {
id: 'fruits',
data: [
['Apples', x: 2, y: 9, z: 6],
['Oranges', x: 6, y: 5, z: 1]
]
}, {
id: 'cars',
data: [
['Toyota', x: 2, y: 8, z: 7],
['Opel', x: 8, y: 2, z: 4],
['Volkswagen', x: 4, y: 4, z: 4]
]
}]
}
});
});
All I did was
change the chart type to "bubble",
add the x and z data,
change the xaxis to "linear"
And it doesn't work.
Can you see the problem?
Thanks much!
Good day.
The formatting of your drilldown data is incorrect, as hinted to in console. Currently you have:
data: [
['Cats', x: 5, y: 9, z:7],
['Dogs', x: 8, y: 8, z:9],
// ...
]
This is half way between an array declaration and a object declaration. I'd suggest switching to each item being an object, like this:
data: [
{ name: 'Cats', x: 5, y: 9, z:7 },
{ name: 'Dogs', x: 8, y: 8, z:9 },
// ...
]
Secondly, you haven't included the required Highcharts-more module which includes the bubble chart type. You can do that like this:
<script src="https://code.highcharts.com/highcharts-more.js"></script>
See this updated JSFiddle for a basic example of how it can work.
I have this Highcharts column chart:
http://jsfiddle.net/ltherond/bmk71a8r/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
type: 'linear'
},
credits: {
enabled: false
},
plotOptions: {
column: {
borderWidth: 0,
groupPadding: 0,
pointPadding: 0,
pointPlacement: 'between',
shadow: false
}
},
series: [{
name: 'John',
data: [{
x: 0,
y: 5,
color: "#00FF00"
}, {
x: 500,
y: -3,
color: "#FF0000"
}, {
x: 600,
y: 5,
color: "#00FF00"
}]
}]
});
});
I want the first bar to extend horizontally from 0 to 500 on the xaxis.
In other words, I want each bar to start at the current x value and end at the next x value.
How do I do that?
The option you are looking for is connectNulls for your series attribute
From my knowledge this options is only available for Area and Line Charts and no longer available for column or bar chart
I recommend you to change your Chart Type to area chart and use connectNulls option as mentioned in Documentation here
To meet your requirement in Column chart itself you need to tune your data you fed into High chart as follows in your series code segment
series: [{
name: 'John',
data: [{
x: 0,
y: 5,
color: "#00FF00"
},{
x: 100,
y: 5,
color: "#00FF00"
},{
x: 200,
y: 5,
color: "#00FF00"
},{
x: 300,
y: 5,
color: "#00FF00"
},{
x: 400,
y: 5,
color: "#00FF00"
}, {
x: 500,
y: -3,
color: "#FF0000"
}, {
x: 600,
y: 5,
color: "#00FF00"
}]
}]
This will solve your problem. see the working fiddle http://jsfiddle.net/bmk71a8r/3/
For this approach you need to write extra codes to format your Data
Good Day
I've got a spline chart with two y-axis which both use the same x-axis cycles (seconds). Zoom (xy) is enabled and works fine but now i want to zoom xy only on one series that is connected to one of the two y-axis. The other series should be static for y-axis (y-zoom disabled), so that they not zoom into y-axis... is this possible?
chart: {
renderTo: 'container',
type: 'spline',
zoomType: 'xy',
alignTicks: false,
resetZoomButton: {
theme: {
display: 'none'
}
}
},
title: {
text: '',
x: -20 //center
},
legend: {
enabled: false //Hide the legend
},
credits: {
enabled: false //Hide credits (highcarts.com link)
},
exporting: {
enabled: false //Hide export menu
},
xAxis: {
title: {
text: 'sec'
},
type:'second',
lineColor: '#666666',
lineWidth: 2,
endOnTick: false,
showFirstLabel: false,
startOnTick: true,
gridLineWidth: 0, //Shows a grid starting from the tick within the data content
tickInterval:1,
tickLength: 10, //Tick length (height)
tickWidth: 2, //Tick width (2px)
tickColor: '#666666',
minorGridLineWidth: 0, //Shows a grid starting from the tick within the data content
minorTickInterval:.1,
minorTickLength: 6, //Minortick length (height -> half of tick tickLength)
minorTickWidth: 1, //Minortick width (1px)
minorTickColor: '#666666',
min: 0, //Prevent for generating sizes lower than 0 on x-axis
max: 15,
labels:{
y: 25
}
},
yAxis: [{
title: {
text: 'm/s'
},
gridLineWidth: 0,
lineColor: '#8BC926',
lineWidth: 2,
min: 0,
max: 200,
offset: 15 //Space between y-axis and x-axis
}, {
title: {
text: 'Bar'
},
gridLineWidth: 0,
lineColor: '#389FFF',
maxZoom: 0,
lineWidth: 2,
min: 0,
max: 300
}],
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
color: '#8BC926',
data: [
{x: 0, y: 80},
{x: 1, y: 110},
{x: 2, y: 100},
{x: 3, y: 50},
{x: 4, y: 75},
{x: 5, y: 90}
],
yAxis: 0
},
{
color: '#389FFF',
data: [
{x: 0, y: 170},
{x: 1, y: 210},
{x: 2, y: 240},
{x: 3, y: 210},
{x: 4, y: 170},
{x: 5, y: 100}
],
yAxis: 1
}]
JS Fiddle (Full example code)
It's not a part of the API, but you can use yAxis.zoomEnabled option: http://jsfiddle.net/0zczvLr9/ - just set for these axes which you don't want to enable zooming.