Related
How i can increase legend symbol size, I have tried these properties
symbolHeight: 12
symbolWidth: 12
symbolRadius: 6 but these are not working for line chart.
code:https://jsfiddle.net/juvcfkmh/4/
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Round legend symbols'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr']
},
legend: {
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6
},
series: [{
data: [1, 3, 2, 4]
}, {
data: [6, 4, 5, 3]
}, {
data: [2, 7, 6, 5]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
The legend appearance is based on a series marker, so you can for example create another series without data, define marker options and link the real series.
series: [{
...,
id: 'firstSeries',
marker: {
radius: 15
},
data: []
}, {
...,
linkedTo: 'firstSeries',
data: [...]
}]
Live demo: http://jsfiddle.net/BlackLabel/4yrk5dq1/
The first stack of my column chart is not fully visible.
The only solution I found was to add a max value on the y-axis.
Bu that is not an ideal solution because the max remains even when I disable a series by clicking on it in the legend.
Here is an JSFiddle example.
{
chart:{
type: 'column'
},
plotOptions: {
column: {
stacking:"normal",
grouping: false
}
},
yAxis: {
title: {
text: ""
},
labels: {
},
allowDecimals:true,
gridLineColor:"#DDDDDD",
endOnTick:false,
max:null
},
xAxis:{
type: "datetime",
min:1609459200000,
softMax:1638316800000,
dateTimeLabelFormats: {month:"%b",year:"%Y"},
labels: {y:20},
title:{text:null},
gridLineColor:"#DDDDDD"
},
series:[{
name:"Solar power",
data:[{
x:1609455600000,y:40.328},{x:1612134000000,y:108.824},{x:1614553200000,y:58.224}],
color: "rgba(255, 174, 1, 1)",
id:"del-solarPhotovoltaic"
},
{
name:"Delivered Electricity",
data:[{x:1609455600000,y:327.583405},{x:1612134000000,y:238.927913},{x:1614553200000,y:54.12531}],
color:"rgba(96, 189, 104, 1)",
id:"del-electricity"
},
{
name:"Natural gas",
data:[{x:1609455600000,y:4073.892843},{x:1612134000000,y:2768.81114}],
color:"rgba(93, 165, 218, 1)",
id:"del-naturalGas"
},
{
name:"Exported Electricity",
data:[{x:1609455600000,y:-19.093318},{x:1612134000000,y:-68.414876},{x:1614553200000,y:-37.718392,}],
color:"rgba(96, 189, 104, 1)",
id:"exp-electricity"
}]
}
This happens because your x-axis min value: 1609459200000 is greater than the first data point x value: 1609455600000 and Highcharts doesn't take into account the first column when calculating y-axis extremes (treated as if it were outside the chart).
Similar situation presented here: http://jsfiddle.net/BlackLabel/b1oucLne/
xAxis: {
min: 4,
max: 40
},
series: [{
type: 'column',
data: [{
x: 2,
y: 4073.892843
}, {
x: 6,
y: 2768.81114
}]
}]
As a solution reduce or remove xAxis.min property.
I have a boxplot with multiple series. I want to add a mean marker to the boxplot. With a single series, I can use a scatter to draw the mean on top of the boxplot. With multiple series, the means end up in the center of the group.
What's the best way to get the dots in the correct place? Bonus points for adding the mean to the tool-tip for the boxplot.
Modified from the standard example:
Highcharts.chart('container', {
chart: {
type: 'boxplot'
},
title: {
text: 'Highcharts Box Plot Example'
},
legend: {
enabled: false
},
xAxis: {
categories: ['1', '2', '3', '4', '5'],
title: {
text: 'Experiment No.'
}
},
yAxis: {
title: {
text: 'Observations'
}
},
series: [{
name: 'S1',
data: [
[755, 811, 838, 885, 955],
[725, 863, 930, 980, 1050],
[704, 752, 827, 870, 915],
[714, 812, 825, 871, 945],
[780, 826, 852, 882, 950]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
},
{
name: 'S2',
data: [
[760, 801, 848, 895, 965],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 816, 871, 950],
[775, 836, 864, 882, 970]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
},
{
name: 'Means 1',
color: Highcharts.getOptions().colors[0],
type: 'scatter',
data: [ // x, y positions where 0 is the first category
[0, 850],
[1, 935],
[2, 825],
[3, 840],
[4, 850]
],
marker: {
fillColor: Highcharts.getOptions().colors[0],
symbol: 'diamond',
lineWidth: 1,
lineColor: Highcharts.getOptions().colors[0]
},
tooltip: {
pointFormat: 'Mean: {point.y}'
}
},
{
name: 'Means 2',
color: Highcharts.getOptions().colors[1],
type: 'scatter',
data: [ // x, y positions where 0 is the first category
[0, 860],
[1, 945],
[2, 805],
[3, 850],
[4, 860]
],
marker: {
fillColor: Highcharts.getOptions().colors[1],
symbol: 'diamond',
lineWidth: 1,
lineColor: Highcharts.getOptions().colors[1]
},
tooltip: {
pointFormat: 'Mean: {point.y}'
}
}
]
});
Producing this:
The simplest solution seems to be:
disable grouping
define points positions by setting x values as decimal numbers
define boxplot size by pointPadding
instead of scatter use line series with lineWidth: 0 (to shared tooltip work properly)
enable shared tooltip
tooltip: {
shared: true
},
plotOptions: {
series: {
grouping: false,
pointRange: 1,
pointPadding: 0.4,
groupPadding: 0,
states: {
hover: {
lineWidthPlus: 0
}
}
}
},
series: [{
data: [
[-0.2, 755, 811, 838, 885, 955],
[0.8, 725, 863, 930, 980, 1050],
[1.8, 704, 752, 827, 870, 915],
[2.8, 714, 812, 825, 871, 945],
[3.8, 780, 826, 852, 882, 950]
],
...
},
{
data: [
[0.2, 760, 801, 848, 895, 965],
[1.2, 733, 853, 939, 980, 1080],
[2.2, 714, 762, 817, 870, 918],
[3.2, 724, 802, 816, 871, 950],
[4.2, 775, 836, 864, 882, 970]
],
...
},
{
type: 'line',
lineWidth: 0,
data: [ // x, y positions where 0 is the first category
[-0.2, 850],
[0.8, 935],
[1.8, 825],
[2.8, 840],
[3.8, 850]
],
...
},
{
type: 'line',
lineWidth: 0,
data: [
[0.2, 860],
[1.2, 945],
[2.2, 805],
[3.2, 850],
[4.2, 860]
],
...
}
]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4947/
API Reference:
https://api.highcharts.com/highcharts/series.line.states.hover.lineWidthPlus
https://api.highcharts.com/highcharts/series.boxplot.grouping
https://api.highcharts.com/highcharts/tooltip.shared
navigate to below fiddle and find first category is not showing boxplot.
my expectation is that highcharts should show q1,q3 and median box.
is there a way to render boxplot without min and max?
https://jsfiddle.net/rammohanreddy201/ga20p14y/28/
Highcharts.chart('container', {
chart: {
type: 'boxplot'
},
title: {
text: 'Highcharts Box Plot Example'
},
legend: {
enabled: false
},
xAxis: {
categories: ['1', '2', '3', '4', '5'],
title: {
text: 'Experiment No.'
}
},
yAxis: {
title: {
text: 'Observations'
},
plotLines: [{
value: 932,
color: 'red',
width: 1,
label: {
text: 'Theoretical mean: 932',
align: 'center',
style: {
color: 'gray'
}
}
}]
},
series: [{
name: 'Observations',
data: [
[null, 801, 848, 895, null],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 806, 871, 950],
[834, 836, 864, 882, 910]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
}, {
name: 'Outliers',
color: Highcharts.getOptions().colors[0],
type: 'scatter',
data: [ // x, y positions where 0 is the first category
[0, 644],
[4, 718],
[4, 951],
[4, 969]
],
marker: {
fillColor: 'white',
lineWidth: 1,
lineColor: Highcharts.getOptions().colors[0]
},
tooltip: {
pointFormat: 'Observation: {point.y}'
}
}]
});
The implemented logic for the boxplot series requires 6 or 5 values in the array or in the data config objects - x,low,q1,median,q3,high. More: https://api.highcharts.com/highcharts/series.boxplot.data and https://www.highcharts.com/docs/chart-and-series-types/box-plot-series
However, setting the low and high to the same value as q1 makes that their lines are invisible (are covered by the q1 line), so it could be a good workaround to your requirement. So the data config should look like this:
data: [
[801, 801, 848, 895, 801],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 806, 871, 950],
[834, 836, 864, 882, 910]
],
Next it will be nice to hide those values in the tooltip. We can use the formatter callback to achieve it:
tooltip: {
formatter(tooltip) {
let point = this.point;
if (point.low === point.q1 || point.high === point.q1) {
point.low = null;
point.high = null;
}
return tooltip.defaultFormatter.call(this, tooltip);
}
},
Demo: https://jsfiddle.net/BlackLabel/rd4aLgne/
API: https://api.highcharts.com/highcharts/tooltip.formatter
Like the title says, if you have a chart with percent stacking enabled for each series and then try to change to normal stacking using the series.update() method it does not work. It doesn't seem to do anything.
percent to normal example: http://jsfiddle.net/8tbPD/
The reverse does work though.
normal to percent example: http://jsfiddle.net/Tn3n9/
Is there something I'm missing?
Thanks.
$('button').on('click', function() {
for(var index in chart.series) {
chart.series[index].update({stacking:'normal'});
}
});
Unfortunately you need to destroy and create a new chart.
Check this answer on another forum: http://forum.highcharts.com/highstock-usage/dynamic-update-toggle-between-value-and-percentage-t31298/
Basically, add a series with "stacking" but with no data. Then show and hide that series (whose stacking-attribute will affect all other series) using JavaScript, e.g. button.
$(function() {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Historic and Estimated Worldwide Population Distribution by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
shared: true
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#ffffff',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff'
}
}
},
series: [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Oceania',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
showInLegend: false,
stacking: 'percent'
}]
});
// the button action
var chart = $('#container').highcharts(),
$button = $('#button');
$button.click(function() {
var series = chart.series[5];
if (series.visible) {
series.hide();
$button.html('Percent');
} else {
series.show();
$button.html('Normal');
}
});
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
<button id="button">Normal</button>