When you have a chart in Highcharts that has x number of columns, and there is not necessarily data at each xAxis point for each column in the chart, is there a way to collapse the columns that do exist for the data points so there is no whitespace between them (where there is no column data)?
https://jsfiddle.net/anth_3/bmfbpxme/1/
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: ''
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true,
reversed: false,
labels: {
step: 1,
rotation: 45
},
type: 'datetime',
tickLength: 7,
showEmpty: false,
tickPositions: [0, 7, 14, 21, 28, 35, 42, 49, 56],
tickmarkPlacement: 'on'
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°F'
},
title: {
text: 'Temperature'
}
}, { // Secondary yAxis
title: {
text: 'Precipitation'
},
labels: {
format: '{value} in'
},
opposite: true
}, { // Tertiary yAxis
title: {
text: ''
},
labels: {
enabled: false
},
opposite: false
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 80,
verticalAlign: 'top',
y: 2,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
plotOptions: {
column: {
marker: {
enabled: false
},
yAxis: 2,
showInLegend: false
},
area: {
color: 'rgb(74, 134, 232)',
lineWidth: 3,
fillOpacity: 0.3,
marker: {
enabled: false,
symbol: 'circle',
radius: 2
},
yAxis: 1,
tooltip: {
valueSuffix: ' in'
}
},
line: {
tooltip: {
valueSuffix: ' °F'
},
lineWidth: 3,
marker: {
enabled: false,
symbol: 'circle',
radius: 2
}
}
},
series: [{
name: 'Harvest',
color: 'rgb(255, 140, 0)',
type: 'column',
data: [100, null, null, null, null, null, null, null, null, null, 100, null]
},{
name: 'Tillage',
color: 'rgb(139, 69, 19)',
type: 'column',
data: [null, 100, null, null, null, null, null, null, null, null, null, 100]
},{
name: 'Irrigation',
color: 'rgb(0, 179, 238)',
type: 'column',
data: [100, 100, null, null, null, null, null, 100, null, null, null, null]
}, {
name: 'Rainfall',
type: 'area',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'Air Temperature',
color: 'rgb(206, 101, 95)',
type: 'line',
data: [9.0, 7.9, 5.4, 12.5, 19.2, 17.8, 24.2, 28.5, 29.3, 32.3, 18.9, 15.6]
}, {
name: 'Soil Temperature',
color: 'rgb(51, 51, 51)',
type: 'line',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
});
});
Related
How to add gradient (mixed with two colors) for one bar chart column and on top of that stack another column with (single color)?
Currently, I am trying to figure it out how to implement gradient and single color pattern in ApexChart.js. As for now, I can only use one at the same time...
JavaScript:
var colors = ["#A865AA", "#222130",];
var dataColors = $("#monthlycost-ApexChart").data('colors');
if (dataColors) {
colors = dataColors.split(",");
}
var options = {
chart: {
height: 260,
type: 'bar',
stacked: true,
stackType: '10%',
toolbar: {
show: false
},
},
stroke: {
curve: 'smooth',
width: 1
},
grid: {
column: {
colors: ['transparent', '#e5e5e5'],
},
},
plotOptions: {
bar: {
columnWidth: '20%',
endingShape: 'rounded',
}
},
dataLabels: {
enabled: false
},
series: [{
name: 'Cost',
data: [5.7, 5.7, 5.4, 5.4, 5.2, 7.8, 5.6, 5.4, 5.7, 0, 0, 0]
}, {
data: [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12]
}],
xaxis: {
labels: {
show: true,
style: {
fontSize: '10px'
},
padding: {
top: 0,
bottom: 20
},
},
offsetY: -10,
position: 'bottom',
axisBorder: {
show: false
},
axisTicks: {
show: false
},
lines: {
show: false
},
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
padding: {
top: -5,
bottom: 0
},
},
yaxis: {
axisBorder: {
show: false
},
axisTicks: {
show: false
},
lines: {
show: false
},
title: {
text: '£0,000',
style: {
fontWeight: 400,
fontSize: '9px',
}
},
tickAmount: 5,
forceNiceScale: false,
decimalsInFloat: 0,
max: 10,
},
fill: {
type: "gradient",
/* gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
type: 'vertical',
opacityTo: 0.9,
colorStops: [
{
offset: 40,
color: "#EF9432",
opacity: 1
},
{
offset: 100,
color: "#A865AA",
opacity: 1
}
]
}*/
},
legend: {
show: false,
},
colors: colors,
grid: {
row: {
show: false,
},
borderColor: '',
padding: {
bottom: 5,
top: 1
}
}
}
Need to get this
Currently have
You should use distributed property
plotOptions: {
bar: {
distributed: true
}
}
With chart.js I have grouped bars.
I have grouped bars with certain dynamic values, but I also have the expectations of those values. So I want to add an indicator of the expectation to the grouped bars.
Basically, a simpler version of this:
Instead of dots, it could also be a line or something.
I have now a group bar chart with some dots that the same stack as the corresponding bars, but the dots don't connect to the bars. How to remedy this?
var data = {
labels: ["January", "February", "March"],
datasets: [
{
label: "Apples",
type: "scatter",
fill: false,
showLine: false,
backgroundColor: "rgba(99,255,132,0.2)",
data: [40, 20, 20],
stack: 'Stack 1'
},
{
label: "Cookies",
backgroundColor: "rgba(255,99,132,0.2)",
data: [60, 20, 20],
stack: 'Stack 1'
},
{
label: "Apples",
type: "scatter",
fill: false,
showLine: false,
backgroundColor: "rgba(99,255,132,0.2)",
data: [30, 30, 10],
stack: 'Stack 2'
},
{
label: "Cookies",
backgroundColor: "rgba(255,99,132,0.2)",
data: [60, 20, 20],
stack: 'Stack 2'
},
{
label: "Apples",
type: "scatter",
fill: false,
showLine: false,
backgroundColor: "rgba(99,255,132,0.2)",
data: [20, 10, 30],
stack: 'Stack 3'
},
{
label: "Cookies",
backgroundColor: "rgba(255,99,132,0.2)",
data: [60, 20, 20],
stack: 'Stack 3'
},
]
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, {
type: 'bar',
data: data,
options: {
scales: {
xAxes: [{
//stacked: true,
}],
yAxes: [{
ticks: {
max: 160,
},
stacked: true,
}]
}
}
});
Here's my fiddle: http://jsfiddle.net/CorneelDragon/kd9xqnc1/23/
I was looking to do this exact same thing. I ended using a scatter plot with its own x-axis, with the max value being calculated from the number of stacks and groups.
Here's an updated fiddle using a scatter graph to plot the points. You could easily hide the additional x-axis.
http://jsfiddle.net/bpcLs7uz/
var data = {
labels: ["January", "February", "March"],
datasets: [
{
label: "Cookies",
backgroundColor: "rgba(255,99,132,0.2)",
data: [60, 20, 20],
stack: 'Stack 1'
},
{
label: "Cookies",
backgroundColor: "rgba(255,99,132,0.2)",
data: [60, 20, 20],
stack: 'Stack 2'
},
{
label: "Cookies",
backgroundColor: "rgba(255,99,132,0.2)",
data: [60, 20, 20],
stack: 'Stack 3'
},
{
label: "Scatter 1",
type: "scatter",
fill: false,
showLine: false,
backgroundColor: "rgba(99,255,132,0.2)",
data: [{y:30, x:1}, {y:30, x:5}, {y:10, x:9}],
xAxisID: 'x-axis-2'
},
{
label: "Scatter 2",
type: "scatter",
fill: false,
showLine: false,
backgroundColor: "rgba(99,255,132,0.2)",
data: [{y:24, x:2}, {y:10, x:6}, {y:15, x:10}],
xAxisID: 'x-axis-2',
showLine: true
},
{
label: "Scatter 3",
type: "scatter",
fill: false,
showLine: false,
backgroundColor: "rgba(99,255,132,0.2)",
data: [{y:50, x:3}, {y:9, x:7}, {y:60, x:11}],
xAxisID: 'x-axis-2'
}
]
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, {
type: 'bar',
data: data,
options: {
scales: {
xAxes: [{
stacked: true,
}, {
id: 'x-axis-2',
type: 'linear',
position: 'bottom',
display: true,
ticks: {
beginAtZero: true,
min: 0,
max: 12,
stepSize: 1
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
max: 160,
},
stacked: true,
}]
}
}
});```
Hi all i have this chart
http://i.prntscr.com/U1ho1cqRTVq-ifoMquWKAw.png
and i need to get in result
http://i.prntscr.com/Lj_PqmNWSxiIBJmK3tS44Q.png
I think solution of this task in crosshair< but i start use highcharts one week ago. Can u help me or give some links that help solve problem.
Because i refactored a lots of code all day and had not find solution of task.
My settings
chart: {
type: 'areaspline',
backgroundColor: 'transparent',
height: '500px',
spacingRight: -1,
spacingLeft: -1
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [],
x: {
min: 0,
max: 0
},
allowDecimalse: false,
gridLineWidth: 1,
gridLineColor: '#393546',
labels: {
y: -20,
},
tickWidth: 0,
lineColor: "#fff",
zIndex: 0,
**crosshair:** {
color: 'rgba(73,168,222,0.5)',
zIndex: 0
}
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
visible: false,
title: {
text: ''
},
labels: {
enabled: false
}
},
plotOptions: {
areaspline: {
marker: {
enabled: false,
states: {
hover: {
symbol: 'circle',
fillColor: '#fff',
lineColor: '#2196f3',
lineWidth: 2,
radius: 7,
enabled: true,
}
},
},
}
},
series: [
{
data: [
],
name: 'V/IRTUS',
showInLegend: false,
color: '#2196f3',
}
],
credits: {
enabled: false
}
};
data [] i get from api and categories too and min max option
I need to draw a chart with two yAxis and I also need to stack columns. When I have a single axis, I can stack column three values very well. The problem is when I add a second yAxis (multiple axis) the new three values overlay on the old one. Which results in 6 values in a single stacked column. I don't want this. I wish I could set a different plotOptions to stack the columns according to the new yAxis.
Here is what I tried
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Enveloppe and Effectif in Kinshasa'
},
subtitle: {
text: 'Source: sygecpaf'
},
xAxis: [{
categories: ['Ja', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}Fc',
style: {
color: '#89A54E'
}
},
title: {
text: 'Enveloppe',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'Effectifsl',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value}',
style: {
color: '#4572A7'
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: '#FFFFFF'
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Total',
color: '#2415cf',
type: 'column',
yAxis: 1,
data: [499, 715, 1064, 499, 715, 1292, 1440, 1760, 1356, 1485, 2164],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Payés',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: [1064, 1941, 956, 544, 1292, 1440, 1760, 1356, 1485, 2164, 1941, 956, 544],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Non payés',
color: '#c572A7',
type: 'column',
yAxis: 1,
data:[1064, 1941, 956, 544, 1292, 1440, 1760, 1356, 1485, 2164, 1941, 956, 544],
tooltip: {
valueSuffix: ''
}
}, {
name: 'Total',
color: '#89A54E',
type: 'column',
data: [70, 69, 95, 145, 182, 215, 252, 265, 233, 183, 139, 96],
tooltip: {
valueSuffix: ' Fc'
}
}, {
name: 'Payés',
color: '#89A5fE',
type: 'column',
data: [70, 69, 95, 145, 182, 215, 252, 265, 233, 183, 139, 96],
tooltip: {
valueSuffix: '°C'
}
}, {
name: 'Non Payés',
color: '#72c5A7',
type: 'column',
data: [70, 69, 95, 145, 182, 215, 252, 265, 233, 183, 139, 96],
tooltip: {
valueSuffix: '°C'
}
}]
});
});
Can anyone edit this fiddle to help what I want to do?
Thanks
I Finally solved the issue. In fact, I had to define the stack property within each series
....,{
name: 'leg1',
stack: 'effstack',
yAxis: 1,
data:[...],
},{
name: 'leg2',
stack: 'effstack',
yAxis: 1,
data:[...],
},{
name: 'leg3',
stack: 'otherstack',
yAxis: 0,
data:[...],
},{
name: 'leg4',
stack: 'otherstack',
yAxis: 0,
data:[...],
},...
Here is the new jsfiddle
I am using EXTJS 4.0 and I want to display tips when user move to on my line Charts i already created Group Line Chart and as well as create Rich Tips also but now my problem is when I create tips for every series and run in browser I got blank tips for three line Chart out of four but fourth line chart display the correct Rich tips. My sample code is:
Code For Panel and Line charts:
var ChequesDetailsChartsMonthWiseWin = Ext.create('Ext.panel.Panel', {
width: 800,
height: 600,
hidden: false,
id:'ChequesDetailsChartsMonthWiseWinId',
title: 'Line Chart',
renderTo: Ext.getBody(),
layout: 'fit',
items: {
xtype: 'chart',
style: 'background:#fff',
animate: true,
store: ChequesDetailsLineChartsMonthwiseStore,
shadow: true,
theme: 'Category1',
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
minimum: 0,
position: 'left',
fields: ['Honorarium','Program Expenses','Assets Amount','Human Resource'],
title: 'Amounts (In Rs)',
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
}, {
type: 'Category',
position: 'bottom',
fields: ['month'],
title: 'Month of the Year'
}],
series: [{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
xField: 'month',
yField: 'Honorarium',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Honorarium');
this.setTitle("Information for " + 'Honorarium - Month :' +storeItem.get('month') );
}
} // tips ends here
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
xField: 'month',
yField: 'Program Expenses',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Program Expenses');
this.setTitle("Information for " + 'Program Expenses - Month :' +storeItem.get('month') );
}
} // tips ends here
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
// fill: true,
xField: 'month',
yField: 'Assets Amount',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Assets Amount');
this.setTitle("Information for " + 'Assets Amount - Month :' +storeItem.get('month') );
}
} // tips ends here
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
// fill: true,
xField: 'month',
yField: 'Human Resource',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Human Resource');
this.setTitle("Information for " + 'Human Resource - Month :' +storeItem.get('month') );
}
} // tips ends here
}]
}
});
And Sample Preview is :
Line Chart :
Line Chart :
Please provide me solution of how to display tips in all charts or where I am doing wrong.