Highcharts space between columns for null xAxis points - charts

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 use gradient and single color at the same time in Apex Chart?

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
}
}

chartjs add dots to bars in grouped bar chart

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,
}]
}
}
});```

Highcharts areaspline, charts crosshair

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

HighCharts how to use different plotOptions per yAxis in a multiple axis chart

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

How to display Tips in Group Line Chart in Extjs 4?

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.