In a Highcharts line chart, I need to put the series name on the right of the last point of each one.
Unfortunately, even if I set chart.spacingRight and chart.marginRight, the space on the right is not used.
Is there any solution/workaround?
Jsfiddle
Highcharts.chart('container', {
chart: {
spacingRight: 200
},
plotOptions: {
series: {
label: {
enabled:false
},
pointStart: 2010,
dataLabels: {
enabled:true,
align:'left',
verticalAlign:'middle',
x:10,
formatter: function() {
return this.series.data.indexOf( this.point ) == this.series.data.length - 1 ? this.series.name : '';
}
}
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
});
You can do that with dataLabels.crop:false and dataLabels.overflow: 'allow'
dataLabels: {
overflow: 'allow',
crop:false,
...
Api documentation currently broken, so impossible to put the real link
Fiddle
Related
I am working a chart and need to add information to the tooltip pop-up box to each point marker. For example, I have a chart with Y: price X: date.
If the price of a product rises because of some event (for example an earthquake), I would like to show that information when someone points their mouse to that specific chart point. Is this possible in wpdatatables or highcharts?
I am a webdesigner looking for some coding help. Thanks in advance for your help.
Best Regards,
Kevin
Tried looking for this option in jsfiddle and
https://jsfiddle.net/Kaige/huo1vyzs/2/
https://cloud.highcharts.com/edit/249857
Highcharts.chart('container', {
title: {
text: 'Pricing chart'
},
subtitle: {
text: 'Price information'
},
yAxis: {
title: {
text: 'Vitamin pricing'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Vitamin A',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Vitamin B',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Vitamin C',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Vitamin D',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
#container {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>
You can add some additional property to your data, map it by keys option and finally show it in a tooltip by customizing pointFormat:
series: [{
keys: ['x', 'y', 'event'],
data: [
[1, 2, 'event1'],
[2, 3, 'event2'],
[3, 4]
]
}],
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b> {point.event} <br/>'
}
Live demo: https://jsfiddle.net/BlackLabel/acugvkqh/
API Reference:
https://api.highcharts.com/highcharts/tooltip.pointFormat
https://api.highcharts.com/highcharts/series.line.keys
Main multispline chart
HI All, as shown in the image, I am plotting multispline chart using highcharts. What I want is to plot only 'a' while loading the chart and the rest will be invisible and I could add them later like this Higcharts Spline (only one).
Thank you in advance.
This previous answered question partly working in my case but I don't want to hide all the series. I want to have one visible series.
You can use Highcharts.Chart.addSeries() method to add additional series dynamically:
Html:
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
<button id="btn">Add series</button>
JS:
let data = [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}];
let btn = document.querySelector('#btn');
let i = 1;
btn.addEventListener('click', () => {
if (i < data.length) {
chart.addSeries(data[i]);
i++;
}
});
let chart = Highcharts.chart('container', {
chart: {
type: 'spline'
},
plotOptions: {
series: {
marker: {
enabled: false
},
pointStart: 2010
}
},
series: [
data[0]
]
});
Demo:
https://jsfiddle.net/BlackLabel/rtsznykp/3/
It seems like Highcharts is adding some spacing between the 1. series line start/series line end and the 2. vertical axis.
Please see the jsfiddle link and below screenshot for more details.
http://jsfiddle.net/8kbf2e1x/
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
xAxis: {
categories: ['D1', 'D2', 'D3', 'D4']
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
verticalAlign: 'bottom'
},
plotOptions: {
series: {
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
How do I get rid of this spaces? I want my series lines to expand from ened to end within the plot area with no gaps. Is it achievable with smaller number of data points? (e.g. in my case every series has only 4 data points)
check pointPlacement
when pointPlacement is "on", the point will not create any padding of the X axis.
plotOptions: {
series: {
pointPlacement: 'on'
}
},
Fiddle demo
I have more than 1 highchart on a single webpage. However when I refresh the page I get another context menu button added to the additional highcharts. I have tried destroying the highchart before recreating to fix this but that didnt work. Any ideas how i can stop the context menu buttons from incrementing with page refreshes?
// Submits form values and ...
$('#dateform').submit(function (event) {
var data = $(this).serialize();
var monthSelect = $("#month option:selected").text();
var yearSelect = $("#year option:selected").text();
$("#reportDate").text(monthSelect + " " + yearSelect);
//-------------------------------------------------------------------------------
// Procedures - Bar
$.getJSON('reports_procedure_count_bar_ajax.cshtml', data, function (chartData) {
// Build the chart
$('#container1').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
$.getJSON('reports_procedure_count_bar_ajax.cshtml', data, function (chartData) {
// Build the chart
$('#container2').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
return false;
});
I'm having problems with the generated caption for the chart using Highcharts,
In this example, the problem this error is generated in the legend of "IE" and "Firefox".
What causes this error and how to fix
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox < 2', 45.0],
['2 < IE <= 3', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari > 1', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
If you set useHTML as true, problem will be fixed.
dataLabels: {
useHTML:true,
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
http://jsfiddle.net/5rNK6/1/