I am trying to set some stacking for my Shield UI JavaScipt Chart. I use the following code, that doesn’t seem to work:
$(function () {
$("#chart").shieldChart({
primaryHeader: {
text: 'Shield UI Inversed Bar Chart Example',
align: 'center'
},
isInverted: true,
seriesSettings: {
dataSeries: [
{
seriesType: 'bar',
stackMode: "percent",
collectionAlias: 'Series A',
data: [12, 22, 25, 32, 33, 25]
},
{
seriesType: 'bar',
collectionAlias: 'Series B',
data: [22, 11, 22, 31, 32, 22]
},
{
seriesType: 'bar',
collectionAlias: 'Series C',
data: [20, 37, 11, 22, 25, 24]
}
]
});
});
I tried with stackMode: "normal", as well, but it didn’t solve the problem.
Here is your code with corrected syntax:
$(function () {
$("#chart").shieldChart({
primaryHeader: {
text: 'Shield UI Inversed Bar Chart Example',
align: 'center'
},
isInverted: true,
seriesSettings: {
dataSeries: [
{
seriesType: 'bar',
stackMode: "percent",
collectionAlias: 'Series A',
data: [12, 22, 25, 32, 33, 25]
},
{
seriesType: 'bar',
collectionAlias: 'Series B',
data: [22, 11, 22, 31, 32, 22]
},
{
seriesType: 'bar',
collectionAlias: 'Series C',
data: [20, 37, 11, 22, 25, 24]
}
]
}
});
});
The stackMode property is applicable for the whole chart e.g. all the series. It is not allowed to place it per series. Neither does it make any sense.
seriesSettings: {
bar: {
stackMode: "percent"
}
},
And here is the whole code you can test:
$(function() {
$("#chart").shieldChart({
primaryHeader: {
text: 'Shield UI Inversed Bar Chart Example',
align: 'center'
},
isInverted: true,
seriesSettings: {
bar: {
stackMode: "percent"
}
},
dataSeries: [
{
seriesType: 'bar',
collectionAlias: 'Series A',
data: [12,-522,25,32,33,25]
},
{
seriesType: 'bar',
collectionAlias: 'Series B',
data: [22,11,22,31,32,22]
},
{
seriesType: 'bar',
collectionAlias: 'Series C',
data: [20,37,11,22,25,24]
}
]
});
});
Related
I need the graph to display the values without rounding, the same as shown in the tooltip
In your chart options dataLabels use the formatter to define the display value, e.g.
dataLabels: {
formatter: function(val) {
return val.toFixed(2);
}
}
Full example with demo chart taken from official docs and added custom label:
var options = {
series: [{
name: 'Marine Sprite',
data: [44, 55, 41, 37, 22, 43, 21]
}, {
name: 'Striking Calf',
data: [53, 32, 33, 52, 13, 43, 32]
}, {
name: 'Tank Picture',
data: [12, 17, 11, 9, 15, 11, 20]
}, {
name: 'Bucket Slope',
data: [9, 7, 5, 8, 6, 9, 4]
}, {
name: 'Reborn Kid',
data: [25, 12, 19, 32, 25, 24, 10]
}],
chart: {
type: 'bar',
height: 350,
stacked: true,
stackType: '100%'
},
plotOptions: {
bar: {
horizontal: true,
},
},
stroke: {
width: 1,
colors: ['#fff']
},
title: {
text: '100% Stacked Bar'
},
xaxis: {
categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
},
dataLabels: {
formatter: function(val) {
return val.toFixed(2);
}
},
tooltip: {
y: {
formatter: function(val) {
return val + "K"
}
}
},
fill: {
opacity: 1
},
legend: {
position: 'top',
horizontalAlign: 'left',
offsetX: 40
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
I am using high-charts to render a stacked grouped high-charts as below.
https://jsfiddle.net/4tojbfsq/1/
I'm able to get the total count of all the datalabels at the top and I also want to render a stack label on the x axis like a dual x-axis as shown in the above fiddle
however my problem is I'm able to show the stacklabels on x-axis however I also see the same stack label duplicated for every stacked series.
is there any way I can just show the stack label at the bottom of the all the series and not repeat anywhere inside the stacked series.
code:
yAxis: {
allowDecimals: false,
//offset:10,
title: {
text: 'Number of fruits'
},
stackLabels: {
enabled: true,
verticalAlign: 'top',
formatter: function() {
return this.total;
},
}
},
plotOptions: {
column: {
stacking: 'normal'
},
series: {
dataLabels: {
enabled: true,
verticalAlign: 'bottom',
overflow: 'none',
crop: false,
y: 20,
formatter() {
return this.series.userOptions.stack;
}
}
}
},
series: [{
name: 'John',
data: [53, 33, 43,63,7,83],
stack: 'malssses'
}, {
name: 'Joe',
data: [33, 43,43,63,73,8],
stack: 'female'
}, {
name: 'Jane',
data: [42, 54,43,62,74,84],
stack: 'malssses',
}, {
name: 'Janet',
data: [34, 40, 42,36,74,83],
stack: 'female',
}]
The duplicate labels are not a stacklabels, but the dataLabels. You can display the dataLabels only for the particular series:
{
name: 'Jane',
data: [42, 54, 43, 62, 74, 84],
stack: 'malssses',
dataLabels: {
enabled: true,
verticalAlign: 'bottom',
overflow: 'none',
crop: false,
y: 20,
formatter() {
return this.series.userOptions.stack;
}
}
}, {
name: 'Janet',
data: [34, 40, 42, 36, 74, 83],
stack: 'female',
dataLabels: {
enabled: true,
verticalAlign: 'bottom',
overflow: 'none',
crop: false,
y: 20,
formatter() {
return this.series.userOptions.stack;
}
}
}
Demo: https://jsfiddle.net/BlackLabel/t3sheqbu/
API: https://api.highcharts.com/highcharts/series.line.dataLabels
How can I configure the y axis so that it has different colors?
From this:
enter image description here
To this:
enter image description here
JSFIDDLE:
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
},
lineWidth: 2
},
Maybe someone had a similar problem?
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/bar-basic/
You can achieve it by setting yAxis.lineColor as Highcharts.GradientColorObject. Check the demo and code posted below.
Code:
Highcharts.chart('container', {
chart: {
type: 'bar',
events: {
load: function() {
let chart = this,
yAxis = chart.yAxis[0];
yAxis.update({
lineColor: {
linearGradient: [chart.plotLeft + yAxis.width, 0, 0, 0],
stops: [
[0, 'yellow'],
[0.33, 'yellow'],
[0.33, 'red'],
[0.66, 'red'],
[0.66, '#21B04C'],
[1, '#21B04C']
]
}
})
}
}
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania']
},
yAxis: {
lineWidth: 4
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2000',
data: [814, 841, 3714, 727, 31]
}, {
name: 'Year 2016',
data: [1216, 1001, 4436, 738, 40]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Demo:
https://jsfiddle.net/BlackLabel/7feLmsvq/
API reference:
https://api.highcharts.com/highcharts/yAxis.lineColor
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Axis#update
https://api.highcharts.com/class-reference/Highcharts.GradientColorObject
I have a chart with legend items which are overlapping each other (this is the image for itemDistance option set to 20 - clearly the distance between items is less than 20px, it seems that 20px is item distance between legend symbols):
The chart is fixed and legend is displayed properly only after resizing the window (image for exactly same configuration object - the only window has been resized):
I can't figure out what I have done wrong or if I have just encountered a bug in Highcharts. I'm using Highcharts v. 7.2.0 with HighchartsReactOfficial library v. 2.2.2. My configuration object:
const options: Highcharts.Options = {
chart: {
type: 'spline',
spacingLeft: 40,
spacingRight: 40,
},
title: {
style: {
display: 'none',
},
},
subtitle: {
style: {
display: 'none',
},
},
credits: {
enabled: false,
},
legend: {
itemDistance: 20,
itemStyle: {
color: '#7990A1',
},
},
plotOptions: {
series: {
marker: {
symbol: 'circle',
lineWidth: 1,
},
shadow: true,
},
},
series: [{
name: 'test1',
type: 'spline',
color: '#576A7B',
data: [23, 3, 33, 54, 29, 38],
},
{
name: 'test2',
type: 'spline',
color: '#FE7B1A',
data: [45, 21, 76, 43, 67, 59],
},
{
name: 'test3',
type: 'spline',
color: '#00BAFF',
data: [7, 19, 5, 9, 12, 11],
},
{
name: 'test4',
type: 'spline',
color: '#000000',
data: [40, 3, 71, 20, 28, 31],
},
],
yAxis: {
title: {
style: {
display: 'none',
},
},
showFirstLabel: false,
},
xAxis: {
categories: ['2019-05-15', '2019-05-16', '2019-05-17', '2019-05-18', '2019-05-19', '2019-05-20'],
},
};
Used by rendering component:
<HighchartsReact highcharts={Highcharts} options={options} />
Help will be greatly appreciated.
I have this code here from this page: http://www.highcharts.com/demo/combo
$(function () {
$('#container').highcharts({
chart: {
},
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
tooltip: {
formatter: function() {
var s;
if (this.point.name) { // the pie chart
s = ''+
this.point.name +': '+ this.y +' fruits';
} else {
s = ''+
this.x +': '+ this.y;
}
return s;
}
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '40px',
top: '8px',
color: 'black'
}
}]
},
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],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}, {
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Jane',
y: 13,
color: Highcharts.getOptions().colors[0] // Jane's color
}, {
name: 'John',
y: 23,
color: Highcharts.getOptions().colors[1] // John's color
}, {
name: 'Joe',
y: 19,
color: Highcharts.getOptions().colors[2] // Joe's color
}],
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});
And it produces this statistic here:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/combo/
I would like to be able to set "John" and "Joe" inactive by default. Is there a way to make this? It should be possible to activate them though.
You want to initially draw in an "invisible" state?
{
type: 'column',
name: 'Joe',
data: [4, 3, 3, 9, 0],
visible: false // <-- set visibility to false
},
Fiddle here.