I am trying to implement stacked bar graph using Highcharts . The problem I am facing is : When the series data for a stack is all null , I want to display 0 as stack label ,but nothing is displayed as stack label .
And setting "minPointLength" to some value , the stack labels are getting overlapped with the stack graph . The distance between stack labels and the stack should vary dynamically but its not happening.
Here's my JSfiddle
https://jsfiddle.net/anandabhishe/6fuffmpt/10/
$(function() {
$('#container').highcharts({
colors: ['#8dafb7', '#f19962', '#e97381', '#f8c465', '#6cd299', '#87cfe2'],
chart: {
type: 'column',
marginBottom: 50,
marginTop: 150,
height: 700
},
title: {
text: ''
},
xAxis: {
categories: ['Q2,16', 'Q3,16', 'Q4,16', 'Q1,17'],
width: 700,
tickmarkPlacement: 'on',
labels: {
y: 40,
style: {
color: '#333333',
fontSize: '25',
fontFamily: 'ProximaNova-Light',
opacity: '.6'
},
}
},
yAxis: {
gridLineWidth: 0,
min: 0,
tickInterval: 20,
title: {
text: ''
},
labels: {
style: {
color: '#333333',
fontSize: '25',
fontFamily: 'ProximaNova-Light',
opacity: '.5'
},
formatter: function() {
return '$' + this.value;
}
},
stackLabels: {
style: {
color: '#555555',
fontSize: '25',
fontFamily: 'ProximaNova-Regular'
},
enabled: true,
formatter:function() {
if (this.total < 1000) {
return '$' + this.total;
} else {
return '$' + (this.total / 1000).toFixed(2) + 'K';
};
}
}
},
legend: {
enabled: false,
width: 600,
floating: false,
x: 50,
align: 'left',
style: {
color: '#555555',
fontSize: '25',
fontFamily: 'ProximaNova-Regular',
opacity: '.8'
},
borderWidth: 0
},
tooltip: {
enabled: false
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
},
series: {
minPointLength: 20,
pointWidth: 30
}
},
series: [{
name: 'FTE-OpEx ',
data: [null, 30, 40, 70],
pointWidth: 30,
}, {
name: 'FTE-CapEx',
data: [null, 20, 30, 20],
pointWidth: 30
}, {
name: 'AWF-OpEx',
data: [null, 40, 40, 20],
pointWidth: 30
}, {
name: 'AWF-CapEx',
data: [null, 40, 40, 20],
pointWidth: 30
}, {
name: 'HW/SW',
data: [null, 40, 40, 20],
pointWidth: 30
}, {
name: 'Other',
data: [null, 40, 40, 20],
pointWidth: 30
}]
});
});
Related
this is how my chart.js is looks like.... This is static chart bar And i Have to make this chat dynamic
(function($) {
// "use strict";
var dlabChartlist = function()
{
var screenWidth = $(window).width();
let draw = Chart.controllers.line.__super__.draw;
var chartBar = function()
{
var options =
{
series: [
{
name: 'Project',
data: [50, 58, 70, 40, 10, 70, 20],
// radius: 12,
},
// {
// name: 'Cycling',
// data: [80, 40, 55, 20, 45, 30, 80]
// },
],
chart: {
type: 'bar',
height: 400,
toolbar: {
show: false,
},
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '57%',
endingShape: "rounded",
borderRadius: 12,
},
},
states: {
hover: {
filter: 'none',
}
},
colors:['#FFA26D'],
dataLabels: {
enabled: false,
},
markers: {
shape: "circle",
},
legend: {
show: false,
fontSize: '12px',
labels: {
colors: '#000000',
},
markers: {
width: 18,
height: 18,
strokeWidth: 10,
strokeColor: '#fff',
fillColors: undefined,
radius: 12,
}
},
stroke: {
show: true,
width: 4,
curve: 'smooth',
lineCap: 'round',
colors: ['transparent']
},
grid: {
borderColor: '#eee',
},
xaxis: {
position: 'bottom',
categories: ['Project1', 'Project2', 'Project3', 'Project4', 'Project5', 'Project6', 'Project7'],
labels: {
style: {
colors: '#787878',
fontSize: '13px',
fontFamily: 'poppins',
fontWeight: 100,
cssClass: 'apexcharts-xaxis-label',
},
},
crosshairs: {
show: false,
}
},
yaxis: {
labels: {
offsetX:-16,
style: {
colors: '#787878',
fontSize: '13px',
fontFamily: 'poppins',
fontWeight: 100,
cssClass: 'apexcharts-xaxis-label',
},
},
},
fill: {
type: 'gradient',
gradient: {
shade: 'white',
type: "vertical",
shadeIntensity: 0.2,
gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
inverseColors: true,
opacityFrom: 1,
opacityTo: 1,
stops: [0, 50, 50],
colorStops: []
}
},
tooltip: {
y: {
formatter: function (val) {
return val + " Days"
}
}
},
};
var chartBar1 = new ApexCharts(document.querySelector("#chartBar"), options);
chartBar1.render();
}
And this is where im showing index.html where i m showing this chart
<div class="tab-pane fade active show" id="monthly">
<div id="chartBar" class="chartBar"></div>
</div>
I don't have enough knowledge about js and i want this chart bar dynamic.....
and i m using mysql
how can i convert it into dynamic chart
By using the below code i got Pie chart as shown in this link: https://i.stack.imgur.com/WdyYA.png
But i need to get Pie Chart as shown in this link: https://i.stack.imgur.com/EscA8.png
Here is my code:
var highchartGraph = {
bindpieChart : function(percentage_c)
{
$('.piechart').highcharts({
chart: {
spacingBottom: -8,
spacingTop: -8,
spacingLeft: -8,
spacingRight: -8,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true,
type: 'pie',
width: null,
height: null,
backgroundColor: 'rgba(255, 255, 255, 0)',
},
title: {
text: percentage_c+'%',
align: 'center',
verticalAlign: 'middle',
style: {
color: '#FFF',
fontSize: '18px',
fontFamily: 'arial'
},
y: 3,
x: 20
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function() {
},
},
states: {
hover: {
enabled: false,
brightness: 0
}
}
},
pie: {
borderWidth: 2,
borderColor: "#6821A5"
}
},
series: [{
name: " ",
colorByPoint: true,
data: [{
name: "Unrestricted",
y: percentage_c,
color: '#6821A5',
tooltip: false
}, {
name: "Restricted",
y: 100 - percentage_c,
color: '#FFF',
dataLabels: {
enabled: false
}
}]
}]
});
}
}
You could add another series that will create the border.
Demo: http://jsfiddle.net/rxp0noj5/
var percentage_c = 75;
$('#container').highcharts({
chart: {
spacingBottom: -8,
spacingTop: -8,
spacingLeft: -8,
spacingRight: -8,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true,
type: 'pie',
width: null,
height: null,
backgroundColor: 'rgba(255, 255, 255, 0)',
},
title: {
text: percentage_c + '%',
align: 'center',
verticalAlign: 'middle',
style: {
color: '#FFF',
fontSize: '18px',
fontFamily: 'arial'
},
y: 3,
x: 20
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function() {},
},
states: {
hover: {
enabled: false,
brightness: 0
}
}
},
pie: {
borderWidth: 2,
borderColor: "none"
}
},
series: [{ // series for border
innerSize: '100%',
data: [1],
borderColor: 'red'
},{
size: '95%', // decresed size for padding between pie and border
name: " ",
colorByPoint: true,
data: [{
name: "Unrestricted",
y: percentage_c,
color: '#6821A5',
tooltip: false
}, {
name: "Restricted",
y: 100 - percentage_c,
color: 'none',
dataLabels: {
enabled: false
}
}]
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
I would like to move the datalabels inside the columns.
In the example below, I would like to have October just below the "20" text in column.
How can I do that ?
Here is a working fsfiddle : http://jsfiddle.net/cfu6fe5e/
$(function () {
Highcharts.chart('container', {
chart: {
type: 'column',
backgroundColor:'rgba(255, 255, 255, 0.1)'
},
plotOptions: {
series: {
pointPadding: 0.01,
groupPadding: 0,
}
},
title: {
text: ''
},
colors: [
'#ffffff'
],
credits: {
enabled: false
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
exporting: {
buttons: {
contextButton: {
enabled: false
}
}
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
min: 0,
labels: {
enabled: false
},
title: {
text: ''
}
},
series: [{
showInLegend: false,
name: 'Ordered subscriptions',
data: [
['October', 20],
['November', 19],
['December', 10]
],
dataLabels: {
inside: true,
enabled: true,
color: '#376fbb',
align: 'center',
verticalAlign:'bottom',
y: 20,
style: {
width:100,
fontSize: '12px',
fontFamily: 'Avenir'
}
}
}]
});
});
Try Formatter and useHTML
dataLabels: {
inside: true,
enabled: true,
color: '#376fbb',
verticalAlign:'bottom',
formatter: function() {
return '<span style="width:20px;padding-left:15px">' + this.y + '</span><br/> <span style="width:20px;">' +this.point.name + '</span>';
},
y: 10,
useHTML:true,
align: 'center',
style: {
fontSize: '15px',
fontFamily: 'Avenir'
}
}
Fiddle : http://jsfiddle.net/4jfbLouq/
Try something like this
xAxis: {
type: 'category',
labels: {
align: 'left',
x: 0,
y: -2
,
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
I am upgrading from Highcharts 3.0.7 to 4.2.5. Several charts that worked fine in 3.0.7 and throwing this error on reflow. Seems the reflow event is providing the wrong context. The context of the window, so the chart is undefined. Is there a way to fix this context?
Here is the chart code from my environment:
var ChartSize = {
SMALL: {
marginTop: 44,
marginLeft: 26,
marginRight: 26,
height: 226,
width: 290,
yAxis: {
height: 116
},
xAxis: {
plotLines: {
x: -30,
y: -26
},
offset: 32,
labels: {
y: 20,
fontSize: '11px'
},
y: 15
}
},
LARGE: {
marginTop: 75,
marginLeft: 28,
marginRight: 28,
height: 375,
yAxis: {
height: 216
},
xAxis: {
plotLines: {
x: -83,
y: -60
},
offset: 40,
labels: {
y: 25,
fontSize: '12px'
},
y: 20
}
}
}
...
{
chart: {
backgroundColor: 'transparent',
type: 'area',
marginTop: ChartSize[args.size].marginTop,
marginLeft: ChartSize[args.size].marginLeft,
marginRight: ChartSize[args.size].marginRight,
height: ChartSize[args.size].height,
width: ChartSize[args.size].width,
reflow: true,
events: {
load: function() {
that.onChartLoaded(this);
},
redraw: function() {
that.onChartLoaded(this);
}
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
area: {
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
},
symbol: 'circle'
},
lineWidth: 0
},
series: {
fillOpacity: 1
}
},
title: {
text: '',
margin: 0
},
tooltip: {
formatter: function() {
return that.getTitle(this.y) + "<br/>" + TimeUtil.formatTime(that.getSecondsOffset(this.x), that.timeFormat24Hour);
},
shared: true,
useHTML: true
},
xAxis: [{
type: 'datetime',
tickInterval: 3600 * 1000,
title: {
text: null
},
startOnTick: false,
maxPadding: 0,
min: min,
max: max,
labels: {
y: ChartSize[args.size].xAxis.labels.y,
autoRotation: false,
staggerLines: 1,
style: {
color: '#000000',
fontSize: ChartSize[args.size].xAxis.labels.fontSize
},
formatter: function() {
if (this.isFirst) {
return '<span class="first-time-label" ' + that.firstLabelStyle + '>' + TimeUtil.formatTime(that.getSecondsOffset(min), that.timeFormat24Hour) + '</span>';
} else if (this.isLast) {
var style = that.timeFormat24Hour ? 'style="margin-left: 6px"' : '';
return '<span class="last-time-label" style="margin-left: -5px" ' + that.lastLabelStyle + '>' + TimeUtil.formatTime(that.getSecondsOffset(max), that.timeFormat24Hour) + '</span>';
}
return '<a href="javascript:void(0)" style="color:#898989; font-size: 12px" title="'
+ TimeUtil.formatTime(that.getSecondsOffset(this.value), that.timeFormat24Hour) + '">●</a>';
},
useHTML: true
},
tickWidth: 0,
plotLines: [{
color: '#282828',
dashStyle: 'ShortDash',
value: sleepTime.getTime(),
width: 2,
label: {
text: '<div class="sleep-time-placeholder bed-time"></div>',
useHTML: true,
rotation: 0,
textAlign: 'left',
x: ChartSize[args.size].xAxis.plotLines.x,
y: ChartSize[args.size].xAxis.plotLines.y,
style: {
fontFamily: "'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif"
}
},
zIndex: 5,
padding: 0.5
},
{
color: '#282828',
dashStyle: 'ShortDash',
value: wakeTime.getTime(),
width: 2,
label: {
text: '<div class="awake-time-placeholder wake-time"></div>',
useHTML: true,
rotation: 0,
textAlign: 'left',
x: ChartSize[args.size].xAxis.plotLines.x,
y: ChartSize[args.size].xAxis.plotLines.y,
style: {
fontFamily: "'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif"
}
},
zIndex: 5
}]
},
{
type: 'datetime',
title: {
text: null
},
lineColor: '#C5C5C5',
linkedTo: 0,
offset: ChartSize[args.size].xAxis.offset,
startOnTick: true,
min: min,
labels: {
autoRotation: false,
align: 'left',
staggerLines: 1,
useHTML: true,
style: {
color: '#000000',
fontSize: ChartSize[args.size].xAxis.labels.fontSize
},
formatter: function() {
if(this.isLast) {
return '';
}
var date = DateParser.parseEpoch(this.value);
var dateStr = DateFormatter.formatMonthDay(date);
return '<span class="timeline_label">' + dateStr.toUpperCase() + '</span>';
},
y: ChartSize[args.size].xAxis.y
},
tickWidth: 1,
tickPosition: 'inside',
tickPositions: [ min, midnightTime.getTime(), max ]
}],
yAxis: [ {
gridLineColor: '#E6E6E6',
labels: {
enabled: false
},
title: {
text: ''
},
lineWidth: 0,
max: 3,
tickInterval: 1
} ],
legend: {
enabled: false
}
}
}
I am using Highcharts with Area graph.
How can I customize xAxis label as hourly basis with suffix as 1st, 2nd, 3rd etc...?
Online Demo
Current format:
01th hour, 02th hour, 03th hour ....
This has to be changed as below:
1st hour, 2nd hour, 3rd hour....
I have tried to convert as above by using ordinal method, but not working though...
May be placing the ordinal script is wrong?
var s=["th","st","nd","rd"],
v=n%100;
return n+(s[(v-20)%10]||s[v]||s[0]);
Full Code:
$(function (n) {
// Everything in common between the charts
var commonOptions = {
colors: ['#fe5758', '#99cc03', '#33b5e6', '#fd8f40', '#e7ca60', '#40abaf', '#f6f7f8', '#e9e9eb'],
chart: {
style: {
fontFamily: 'Roboto Light',
fontWeight: 'normal',
fontSize: '12px',
color: '#585858',
}
},
title: {
text: null
},
subtitle: {
text: null
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
xAxis: {
title: {
style: {
fontFamily: 'Roboto',
color: "#000",
}
},
labels: {
style:{ color: '#000' }
},
lineColor: '#e4e4e4',
lineWidth: 1,
tickLength: 0,
},
yAxis: {
title: {
style: {
fontFamily: 'Roboto',
color: "#000",
}
},
offset:-6,
labels: {
style:{ color: '#bbb' }
},
tickInterval: 100,
lineColor: '#e4e4e4',
lineWidth: 1,
gridLineDashStyle: 'dash',
},
series: [{
backgroundColor: "rgba(0 ,0, 0, 0.5)",
}],
// Area Chart
plotOptions: {
area: {
stacking: 'normal',
lineWidth: 1,
fillOpacity: 0.1,
marker: {
lineWidth: 1.5,
symbol: 'circle',
fillColor: 'white',
},
legend: {
radius: 2,
}
}
},
tooltip: {
useHTML: true,
shared: true,
backgroundColor: '#5f5f5f',
borderWidth: 0,
style: {
padding:10,
color: '#fefefe',
}
},
legend: {
itemStyle: {
fontFamily: 'Roboto Light',
fontWeight: 'normal',
fontSize: '12',
color: '#666666',
},
marker: {
symbol: 'square',
verticalAlign: 'middle',
radius: '4',
},
symbolHeight: 6,
symbolWidth: 6,
},
};
$('#areaChartTwoWay-time').highcharts(Highcharts.merge(commonOptions, {
chart: { type: 'area' },
xAxis: {
title: { text: 'Hours', },
type: 'datetime',
min:Date.UTC(2016,04,16,1,0,0,0),
minRange: 12 * 3600 * 500,
dateTimeLabelFormats: {
hour: '%Hth hour',
},
},
yAxis: {
tickInterval: 30,
title: { text: 'Total views', },
offset:0,
},
series: [{
name: 'Unique open',
lineColor: '#fb8b4b',
marker: { lineColor: '#fb8b4b', fillColor: 'white', },
data: [88, 68, 79, 39, 48, 69, 69, 18, 40, 62, 91, 61, 39],
legendIndex:1,
pointInterval: 3600 * 500,
pointStart:Date.UTC(2016,04,16,1,0,0,0),
}, {
name: 'Forwards',
lineColor: '#99cc03',
marker: { lineColor: '#99cc03', fillColor: 'white', },
data: [3, 8, 15, 12, 61, 32, 43, 18, 9, 12, 22, 18, 12],
legendIndex:0,
pointInterval: 3600 * 500,
pointStart:Date.UTC(2016,04,16,1,0,0,0),
}]
}));
var s=["th","st","nd","rd"],
v=n%100;
return n+(s[(v-20)%10]||s[v]||s[0]);
$('.highcharts-grid > path:last-child').remove();
$('.highcharts-markers > path:last-child').remove();
});
You could call another function to get the ordinal. A quick google found this method:
function getGetOrdinal(n) {
var s=["th","st","nd","rd"],
v=n%100;
return n+(s[(v-20)%10]||s[v]||s[0]);
}
This takes a number and returns a string, which is made up of the number with he correct ordinal appended.
This won't work with dateTimeLabelFormats though. For your use, you could use a simple label formatter.
I've updated your online demo here also:
http://jsfiddle.net/6nz0sod1/2/
Hope this helps
Source: https://ecommerce.shopify.com/c/ecommerce-design/t/ordinal-number-in-javascript-1st-2nd-3rd-4th-29259