I am trying a chart that combines two chart types in a one single-chart (spline & polynomial). When I merge both of them the chart stops working. If I them separately they work. Can I merge both chart in one using highchart?
$(function() {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Polynomial regression - with extrapolation and different style'
},
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: '#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: '{point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'SplineChart',
type: 'spline',
marker: {
enabled: true
},
tooltip: {
pointFormatter: pointFormatter
},
data: [
[1, 2],
[1, 6],
[3, 9],
]
},
{
regression: true,
regressionSettings: {
type: 'polynomial',
color: 'rgba(223, 183, 83, .9)',
dashStyle: 'dash'
},
name: 'Test input',
color: 'rgba(223, 83, 83, .5)',
data: [
[1, 1],
[2, 3],
[3, 9],
]
}
]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="//rawgithub.com/phpepe/highcharts-regression/master/highcharts-regression.js?8">
</script>
Highcharts Regression
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
That's a reported bug. Anyway while using a transparent color for the spline it works :
series: [{
regression: true,
regressionSettings: {
type: 'polynomial',
color: 'rgba(223, 183, 83, 0)', // transparent color
dashStyle: 'dash'
},
name: 'SplineChart',
type: 'spline',
marker: {
enabled: true
},
data: [
[1, 2],
[1, 6],
[3, 9],
]
}
Updated Fiddle
Related
I am attempting to create the following chart:
However I can't seem to get the plotbands to work in this way; right now, they fill the entire axis:
I am not sure if I should use annotations instead, but so far I haven't gotten it to work. What can I try next?
Highcharts.chart('container',{
credits: {
enabled: false
},
title: {
text: "hello world",
style: {
visibility: 'hidden'
}
},
chart: {
type: 'line',
width: 400,
},
legend: {
enabled: false
},
exporting: {
enabled: true,
allowHTML:true,
chartOptions: {
chart: {
marginLeft: 175,
marginRight: 175
},
plotOptions: {
line: {
dataLabels: {
style: {
fontSize: 14
},
verticalAlign: "top",
useHTML: true
}
}
}
}
},
yAxis: {
startOnTick: false,
endOnTick: false,
gridLineWidth: 2,
tickWidth: 2,
tickLength: 20,
plotBands: [{
color: 'rgba(231, 23, 60, 0.5)', // Color value
from: 5, // Start of the plot band
to: 6.2 // End of the plot band
},
{
color: 'rgba(53, 101, 237, 0.5)', // Color value
from: 1, // Start of the plot band
to: 3 // End of the plot band
}
],
title: {
align: 'high',
offset: -40,
text: 'mmol/L',
style: {
fontWeight: "bold",
fontSize: 15
},
rotation: 0,
y: -20
},
min: 0,
max: 7,
labels: {
x: -10,
y: -3,
formatter: function () {
if (this.value != 0) {
if (this.value < 8) {
return this.value;
}
}
},
style: {
fontWeight: "400",
lineHight: "20",
padding: "0",
fontSize: "13"
}
}
},
annotations: [{
shapes: [{
point: '0',
type: 'circle',
r: 10
}, {
point: '3',
type: 'rect',
width: 20,
height: 20,
x: -10,
y: -25
}, {
fill: 'none',
stroke: 'red',
strokeWidth: 3,
type: 'path',
points: ['0', '1', {
x: 6,
y: 195,
xAxis: 0,
yAxis: 0
}],
markerEnd: 'arrow'
}],
labels: [{
point: {
x: 6,
y: 195,
xAxis: 0,
yAxis: 0
}
}]
}],
xAxis: {
gridLineColor: 'transparent',
accessibility: {
rangeDescription: 'Range: 2010 to 2020'
},
categories: [2018, 2019]
},
plotOptions: {
line: {
dataLabels: {
style: {
fontSize: 14
},
verticalAlign: "top",
useHTML: true,
format: '<div style="max-width: 10ch; text-align: center;">{y}<br/>mmol/L</div>'
}
}
},
series: [{
name: '',
color: "black",
data: [5.4, 3],
showInLegend: false,
dataLabels: {
enabled: true,
useHTML: true,
}
}],
});
<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/annotations.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
This kind of plotBand shape is not possible from the API level, but you can simulate it in several ways. Example configurations:
SVG Renderer:
chart: {
events: {
render() {
const chart = this;
if (chart.rects) {
chart.rects = chart.rects.destroy();
}
chart.rects = chart.renderer.g('rects').attr({
zIndex: 1
}).add();
let x = chart.xAxis[0].toPixels(1),
y = chart.yAxis[0].toPixels(4),
width = chart.xAxis[0].toPixels(2) - chart.xAxis[0].toPixels(1),
height = chart.yAxis[0].toPixels(2) - chart.yAxis[0].toPixels(4);
chart.rect = chart.renderer.rect(x, y, width, height)
.attr({
fill: 'grey'
}).add(chart.rects)
chart.rect = chart.renderer.rect(chart.xAxis[0].toPixels(3), y, width, height)
.attr({
fill: 'grey'
}).add(chart.rects)
}
}
},
Demo:
https://jsfiddle.net/BlackLabel/wst607ub/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
Annotations:
annotations: [{
draggable: false,
shapes: [{
points: [{
x: 1,
y: 2,
xAxis: 0, // xAxis reference used, use xAxis value
yAxis: 0 // yAxis reference used, use xAxis value
}, {
x: 2,
y: 2,
xAxis: 0,
yAxis: 0
}, {
x: 2,
y: 4,
xAxis: 0,
yAxis: 0
}, {
x: 1,
y: 4,
xAxis: 0,
yAxis: 0
}],
type: 'path'
}]
}]
Demo:
https://jsfiddle.net/BlackLabel/uvxzp6o7/
API Reference:
https://api.highcharts.com/highcharts/annotations
Polygon series:
series: [{
name: 'Polygons',
type: 'polygon',
color: 'grey',
showInLegend: false,
enableMouseTracking: false,
states: {
inactive: {
opacity: 1,
},
},
data: [
[1, 2],
[2, 2],
[2, 4],
[1, 4],
null, // allows multiple polygons
[3, 2],
[4, 2],
[4, 4],
[3, 4],
]
}]
Demo:
https://jsfiddle.net/BlackLabel/4n7ep3k2/
API Reference:
https://api.highcharts.com/highcharts/series.polygon
Take note that annotations and polygon series require the module to be included.
I created stacked column in Highchart.
I used pointWidth: 50 to reduce column bar width, but space between stacked bar is too big.
How to reduce space between stacked bar?
[Updated question]
I also want to display stack name in legend, and user can click to stack name to hide stack in chart. Is it posible?
Here my source code:
JSfiddle link https://jsfiddle.net/viethien/ak2h1sfq/4/
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: ( // theme
Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color
) || 'gray'
}
}
},
legend: {
align: 'center',
x: 0,
verticalAlign: 'bottom',
y: 5,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || 'white',
borderColor: '#CCC',
borderWidth: 0,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true
}
},
series: {
//stacking: 'normal',
dataLabels: {
formatter: function() {
console.log(this);
return this.series.name;
},
enabled: true,
//allowOverlap: true,
//align: 'right',
color: '#fff',
shadow: false,
//x:-50,
style: {
fontSize: "8px",
textShadow: "0px"
}
},
//pointPadding: 0.1,
pointWidth: 50,
groupPadding: 0,
stacking: 'normal',
//colorByPoint: true,
//showInLegend: false
}
},
series: [{
name: 'Component',
data: [[0,5], [1,3], [2,4], [3,7], [4,3]],
stack: 'Forecast'
}, {
name: 'Module',
data: [[0,2], [1,2], [2,3], [3,2], [4,2]],
stack: 'Forecast'
},
{
name: 'Board',
data: [3, 5, 5, 3, 2],
stack: 'Forecast'
},
{
name: 'Component',
data: [6, 4, 5, 8, 4],
stack: 'Real'
}, {
name: 'Module',
data: [3, 3, 4, 3, 3],
stack: 'Real'
},
{
name: 'Board',
data: [4, 6, 6, 4, 3],
stack: 'Real'
}
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
You can set the groupPadding to higher value, which moves the column together for the group. Be aware that using the fixed value for the pointWidth disturbs the chart responsivity, but you can customize those values for particular chart width using the responsive rules: https://api.highcharts.com/highcharts/responsive
Demo: https://jsfiddle.net/BlackLabel/we1rc5vg/
plotOptions: {
column: {
stacking: 'normal',
},
series: {
//stacking: 'normal',
dataLabels: {
formatter: function() {
console.log(this);
return this.series.name;
},
enabled: true,
//allowOverlap: true,
//align: 'right',
color: '#fff',
shadow: false,
//x:-50,
style: {
fontSize: "8px",
textShadow: "0px"
}
},
//pointPadding: 0,
pointWidth: 50,
groupPadding: 0.2,
stacking: 'normal',
//colorByPoint: true,
//showInLegend: false
}
},
API: https://api.highcharts.com/highcharts/series.column.groupPadding
EDIT:
To create a stack legend item you need to add a series without data (that creates the legend button) and customize button functionality using the legendItemClick callback.
Demo: https://jsfiddle.net/BlackLabel/qLs219u4/
Notice that this solution may not work perfectly when stack will be hidden and the user will click on a particular series legend item from the hidden stack.
Once I have worked on really complicated example of it. If you want to know you can explore this topic here: https://www.highcharts.com/forum/viewtopic.php?t=42157
I am using Highcharts latest version and trying to export a chart on a png and trying to see if there is a way to limit the number of rows shown on the exported png using the horizontal layout up to 2 rows if the legends are breaking into more than 2 rows.
A working export example is here: https://jsfiddle.net/siluok3/085gzjtn/7/
Highcharts.chart('container', {
chart: {
style: {
fontFamily: '"Arial", sans-serif',
color: '#7b797a',
'z-index': 'inherit'
},
resetZoomButton: {
theme: {
fill: '#5cb85c',
stroke: '#4cae4c',
style: {
color: '#fff',
fontSize: '15px'
},
r: 3,
states: {
hover: {
fill: '#449d44',
stroke: '#398439'
}
}
}
}
},
title: {
text: 'Data labels only visible on export'
},
credits: {
enabled: false,
style: {
display: "none"
}
},
legend: {
useHTML: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 32,
itemStyle: {
color: '#7b797a',
fontWeight: "normal"
},
itemHoverStyle: {
color: '#7b797a'
}
},
navigation: {
buttonOptions: {
theme: {
'stroke-width': 0,
r: 0,
fill: null,
states: {
hover: {
fill: null
},
select: {
stroke: null,
fill: null
}
}
}
},
menuItemHoverStyle: {
background: '#008add'
}
},
xAxis: {
labels: {
rotation: 270
},
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mayfsdfdsfdsf', 'Junfdfsd', 'Julfsdfsdfds', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [6, 4, 2],
name: 'Firfdsfdsst'
}, {
data: [7, 3, 2],
name: 'Secfsdfdsdfond'
}, {
data: [9, 4, 8],
name: 'Third'
}, {
data: [1, 2, 6],
name: 'Fourth'
}, {
data: [4, 6, 4],
name: 'Fifdsfdsfdsfdsfsdfth'
}, {
data: [1, 2, 7],
name: 'Sixth'
}, {
data: [4, 2, 5],
name: 'Sevefdsfdsfdsfsdnth'
}, {
data: [8, 3, 2],
name: 'Efdsfdsfdsfdsighth'
}, {
data: [4, 5, 6],
name: 'Nifdsfdsfdsfdsfdsfnth'
}, {
data: [4, 2, 5],
name: 'Sevefdsfdsfdsfsdnth'
}, {
data: [8, 3, 2],
name: 'Efdsfdsfdsfdsighth'
}, {
data: [4, 5, 6],
name: 'Nifdsfdsfdsfdsfdsfnth'
}],
exporting: {
chartOptions: {
legend: {
title: {
text: '',
},
itemHiddenStyle: {
display: 'none',
},
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
itemDistance: 10,
y: 0,
itemMarginTop: 5,
itemStyle: {
fontSize: '10px',
},
symbolPadding: 2,
alignColumns: false,
},
rangeSelector: {
enabled: false
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
}
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
As you can see the legends break into a 3rd row if they are more or larger. Is there an intuitive way to find a workaround?
You can use itemWidth property to limit the width of the item and, as a result, the number of rows. Unfortunately for now there is no built-in solution for dynamically adjusting the number of rows in the legend.
exporting: {
chartOptions: {
legend: {
itemWidth: 90,
...
},
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/gtjewc1v/
API Reference: https://api.highcharts.com/highcharts/legend.itemWidth
In this Stacked Column Chart I want to add different series for different categories in x axis. For example, in the category of apple i want to show aaa=1,bbb=2,ccc=3 and for the category of Oranges i want to show like eee=5,fff=4,ggg=1 and so on.Is it possible?
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
<script src="https://code.highcharts.com/highcharts.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" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
You need to set x data values, for example as the first elements in arrays:
series: [{
name: 'John',
data: [
[0, 5],
[1, 3]
]
}, {
name: 'Jane',
data: [
[1, 2],
[2, 2]
]
}, {
name: 'Joe',
data: [
[0, 3],
[2, 4]
]
}]
Live demo: http://jsfiddle.net/BlackLabel/nh1toe8g/
API Reference: https://api.highcharts.com/highcharts/series.column.data
I am using Highcharts to create a chart:
http://dev.speechlink.co.uk/David/sixthiteration/home.php
When scaling however, it seems to chop part of the right side of the chart off...I'm not entirely sure why..?
Here is my code:
jQuery:
chart = new Highcharts.Chart({
chart: {
renderTo: 'summarycontainer',
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: 'No. Entries Submitted This Month',
style: {
fontSize: 10
}
},
xAxis: {
lineWidth: 1,
lineColor: '#999999',
title: {
text: 'x-axis'
}
},
yAxis: {
title: {
text: 'y-axis'
},
labels: {
y: 2
},
lineWidth: 1,
lineColor: '#999999',
gridLineWidth: 1,
gridLineColor: '#eaeaea',
startOnTick: false,
showFirstLabel: false
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
plotOptions: {
},
series: [{
type: 'scatter',
name: '',
data: [10, 20, 10, 20, 2, 3, 1, 9],
lineColor: '#f6a828',
color: '#418ed6'
}],
});
});
And in my HTML, I have a div container:
<div id = "summarycontainer" style="width: 250px; height: 250px"></div>
In code above you have:
data: [10, 20, 10, 20, 2, 3, 1, 9],
and in source of page thre is:
data: [10, 20, 10, 20, 2, 3, 1],
Maybe that you think the plot chops last dot?
edit:
Add: categories: ['', ''] to your xAxis :
xAxis: {
categories: ['', ''],
lineWidth: 1,
lineColor: '#999999',
title: {
text: 'x-axis'
}
},
In my opinion there is a bug in highcharts.
edit 2:
For formatting tooltip use (below is only example!):
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C';
}
},