I have a code to plot a highcharts on my website, I need to plot multiple charts on same div(container), so please guide to reach this, below is my code
$('#container').highcharts('StockChart', {
chart: {
borderColor: 'black',
borderWidth: 0,
borderRadius: 10,
height:150
},
I tried this for append $('#container').append.highcharts('StockChart', but it seems like a wrong syntex,please share your answer,thanks
Taken directly from highcharts documentation pages:
To combine several chart types in one chart you only need to create series of different types:
series: [{
type: 'column',
name: 'Jane',
data: [3, 2, 1, 3, 4]
}, {
type: 'column',
name: 'John',
data: [2, 3, 5, 7, 6]
}, {
type: 'column',
name: 'Joe',
data: [4, 3, 3, 9, 0]
}, {
type: 'spline',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33]
}]
JSfiddle example.
Repeat the following process for each child chart you need.
var chartDiv = document.createElement('div'); // Create a new div
$('#container').append(chartDiv); // Append it to your container
$(chartDiv).highcharts(.....); // Initialize highcharts in that div
Related
I need to add starting and ending points on stacked charts , is there any way we can add it.
In The Given picture I need to start SaaS Quick Ratio from the 4 rather than 0 .
Setting to series.threshold give you possibility to serve base to the column, in your case you can start column from 4 at yaxis.
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
series: [{
name: 'John',
threshold: 4,
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
Demo: https://jsfiddle.net/BlackLabel/f73zcu4t/
For a Highcharts spline type chart, I want to completely remove the left and right spaces.
I tried to change some options but there is no success.
Spacing and margin keys did not make any appearance changes.
Does anyone have any info on how to remove the spaces, all help is welcome.
Example chart
Highcharts.chart('container', {
title: {
text: ''
},
chart: {
type: 'spline',
},
legend: {
display: false
},
xAxis: {
categories: [7, 13, 16, 18, 19, 20, 29, 22, 25, 38, 23, 26, 28, 29, 33],
},
yAxis: {
tickPosition: 'inside',
min: 0,
title: {
text: null
},
floor: 0,
tickWidth: 1
},
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>
<div id="container" style="height: 400px; width: 500px"></div>
These gaps are added when using the xAxis.categories option. If you remove these options then it works the way you want. For tick positioning in this case it is better to set other available API options. Find out more about it here: https://api.highcharts.com/highcharts/xAxis.tickPositions
I'm trying to create a border around two parts of a stacked column in Highcharts.
Right now I can create the borders separately for each part but this way they will be separated by a line in the middle of them. (http://jsfiddle.net/chazyzyj/) Is there a way to set the top and bottom part of the border to different sizes?
Or any other solutions?
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1],
borderWidth: 2,
borderColor: 'red',
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
borderWidth: 2,
borderColor: 'red',
}]
I'm new to coding, and I feel like this answer shouldn't be very difficult; yet, I've struggled with it for about two days now and so I'm looking for help.
I'm trying to specify the colors of areas in Highcharts' "Area Chart with Negative Values". I'm using Highcharts' basic template, but can't figure out how to change the colors of the respective areas.
Here's the JSfiddle that includes me trying to specify the color; when I do so, the chart fails to run. (Notice I've tried to change the color of the "john" series).
http://jsfiddle.net/aoouym2o/
I followed the instructions given in HighCharts' API, but I can't make it work. Here's the API section: http://api.highcharts.com/highcharts#plotOptions.area.color
Again, here's the original code without me trying to change any color:
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Area chart with negative values'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
credits: {
enabled: false
},
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]
}]
});
});
What am I missing?
You did it exactly right, you were just missing a comma before your added color setting ;)
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
color: '#FF0000'
},
Here is a link to a modified fiddle. (updated link to the working version)
You can set color for the chart by specifying it in each series object:
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
color: '#0000FF'
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1],
color: '#FF0000'
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5],
color: '#00FF00'
}]
Just change color setting :P
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
color : '#f7a35c'
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1],
color: '#7cb5ec'
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5],
color: '#90ed7d'
}]
and if you want to change the color of the number > 0 watch
http://www.highcharts.com/docs/chart-concepts/series
Add option:
plotOptions: {
series: {
lineColor: '#303030'
}
},
I have two stacked bar charts, but all the legends (of both bars) are displayed together. I want to group the legends based on the items stacked in the bar.
can some one help me?
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
bar: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
});
});
I have similar type of bar. and i want to group janet and jane together as a group and joe and john as another group.
Based on the reference example you linked to, you can do this with the new series 'linkedTo' property in version 3.
http://api.highcharts.com/highcharts#plotOptions.series.linkedTo
updated example:
http://jsfiddle.net/jlbriggs/6gw5P/2/
linkedTo:':previous'
I know this is an old issue, but setting showInLegend on your series, will work, and seems the easiest way.
showInLegend: false
Eg:
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male',
showInLegend: false
}
You can't group the legends by stack, because then you'll lose the ability to identify the different components (IE either the individual series won't have a distinct color or the legend color won't match them). The legends map to the people because those are all distinct data sources and since you add them that way it displays them like that.
If you don't care about the different components having a distinct color, then you don't want a stacked bar chart at all. You can just have a normal bar chart with 2 series, male and female.
series: [{
name: 'Male',
data: [10, 7, 8, 9, 7]
},
name: 'Female',
data: [5, 5, 10, 6, 4]
}
}
You can link series using ids and linkedTo. In the example below, the first serie is linked to the second:
series: [
{
type: 'column',
name: '',
data: [],
linkedTo: 'second_serie_id', // <--- this
color: '#DE3733',
pointWidth: 1,
showInLegend: false,
},
{
id: "second_serie_id", // <--- this
type: 'scatter',
name: 'FFT 1',
data: [],
color: '#DE3733',
lineWidth: 0,
showInLegend: true,
states: { hover: { enabled: false } }
}
]