Does anybody knows how to "transpose" a waterfall graph in data studio?
By default, this graph shows vertical bars, but I want them to be horizontal, I think this should be easy.
I just want to turn it around, so that the bars are horizontal
Additionally, can I give a different color to each bar?
Thanks
I used to do this and i used HighchartsReact. => Result
<HighchartsReact
highcharts={Highcharts}
options={{
chart: {
type: 'waterfall',
inverted: true,
},
exporting: {
enabled: false,
},
title: {
text: '',
},
xAxis: {
type: 'category',
},
yAxis: {
title: {
text: '',
style: {
fontWeight: 'bold',
},
},
},
tooltip: {
pointFormat: '<b>{point.y:,.3f}</b>',
},
legend: {
enabled: false,
},
credits: {
enabled: false,
},
series: [{
upColor: Highcharts.getOptions().colors[2],
color: Highcharts.getOptions().colors[3],
data: dataWaterfall,
dataLabels: {
enabled: true,
formatter: function() {
return Number(this.y).toFixed(3);
},
style: {
fontWeight: 'bold',
},
},
pointPadding: 0,
}],
}}
/>
Related
I tried "stacking" and "styles" in plotOptions to remove 0% in the middle of my graph. please see my "codepen" example to understand my problem and help me out.
my graph code
plotOptions: {
bar: {
stackings: 'normal',
dataLabels: {
enabled: true,
format: '{y} %',
},
marker: {
enabled: false,
},
},
series: {
grouping: false,
},
},
Use formatter function and show data-labels only with different value than 0:
plotOptions: {
bar: {
...,
dataLabels: {
enabled: true,
formatter: function() {
if (this.y !== 0) {
return this.y + ' %';
}
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/t98hzdbx/
API Reference: https://api.highcharts.com/highcharts/series.column.dataLabels.formatter
Here is a bar chart showing dates. I'm trying to stylize it and to save space (but also because it is useless).
Do you know how we remove the green square and the text "data by year" please?
Here is my code:
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
zoomType: 'x'
},
colors:[
'#d8d826'
],
legend:{
itemStyle:{
fontSize:'10px',
font:'10pt',
color:'#000000'
}
},
title:{
style:{
fontSize:'0px'
}
},
subtitle:{
style:{
fontSize:'0px'
}
},
xAxis: {
// NOTE: There is an interesting bug here where not all labels will be shown when the chart is redrawn.
// I'm not certain why this is occuring, and I've tried different methods to no avail. I'll check with Highcharts.
categories: ['1960','1961','1962','1963','1964','1965','1966','1967','1968','1969','1970','1971','1972','1973','1974','1975','1976','1977','1978','1979','1980','1981','1982','1983','1984','1985','1986','1987','1988','1989','1990','1991','1992','1993','1994','1995','1996','1997','1998','1999','2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016'],
tickmarkPlacement: 'on', tickInterval: 1,
minRange: 1 // set this to allow up to one year to be viewed
},
yAxis: {
min: 15,
title: {
text: 'Number',
style:{
fontSize:'0px'
}
}
},
tooltip: {
shared: false,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'data by year',
data: [49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4,49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4,49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4,49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4,49.9,83.6,48.9,69.1,50]
}]
});
// on change handler for both sliders
$('.mySlider').bind('change', function(e) {
e.preventDefault();
var chart = $('#container').highcharts();
// use setExtremes to set the x-axis ranges based on the values in the sliders
chart.xAxis[0].setExtremes($('input[name="slider1"]').val(), $('input[name="slider2"]').val());
});
});
You can see the result in https://jsfiddle.net/uvat8u05/9/
Thank you !
You can disable the legend:
legend:{
enabled: false
},
Updated fiddle:
https://jsfiddle.net/uvat8u05/12/
I have a written a stats chart using highchairs.com for the daily visits and installs. I want to show the tooltip with Datetime and Names with total values for each series when hover or on click event.
Highcharts tooltip shared Data shared output is displaying with names but not the date and time correctly when you mouseover on the markers.
What I'm doing wrong?
The code I have written is on jsfiddle as well.
$(function () {
$('#campaign-container').highcharts({
chart: {
type: 'areaspline',
},
title: {
text: null
},
credits: {
enabled: false,
},
navigation: {
buttonOptions: {
enabled: false
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day:"%b %e, %Y",
},
tickInterval: 2,
allowDecimals: false,
labels: {
formatter: function () {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
min: 0,
max: 3000,
tickInterval: 1000,
title: {
text: ''
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
shared: true
},
legend: {
align: 'left',
verticalAlign: 'bottom',
layout: 'horizontal',
x: 0,
y: 0
},
plotOptions: {
areaspline: {
lineWidth: null,
marker: {
enabled: false,
radius: 5
}
}
},
series: [{
name: 'Visits',
color: '#d3d3d3',
data: [750,850,1000,1250,1050,950,720,850,650,750,950,1050,1150,1250,1450,1650,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20]
}, {
name: 'Installs',
color: '#e77378',
data: [550,650,750,850,950,1050,1150,1250,1150,1050,950,850,750,650,550,450,750,20,20,20,20,20,20,20,20,20,20,20,20,20,20]
}]
});
});
You need to provide either:
1) a pointStart and pointInterval property, on the series level (either in the plotOptions, or in the series object)
2) datetime values in the x values of your data
The datetime values can either by epoch time stamps (in milliseconds), or Date.UTC() objects.
The pointInverval, if used, must be in milliseconds.
Example using the pointStart and pointInterval properties:
http://jsfiddle.net/jlbriggs/7yrnreLx/3/
I have updated the code with the correct date time values and added the customised crosshair.
Here is the final code with a correct data values
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: null
},
credits: {
enabled: false,
},
navigation: {
buttonOptions: {
enabled: false
}
},
xAxis: {
type: 'datetime',
tickInterval: 2,
dateTimeLabelFormats: {
day:"%e",
},
crosshair: {
color:'#e77378',
zIndex: 2,
width: 3,
}
},
yAxis: {
min: 0,
max: 3000,
tickInterval: 1000,
title: {
text: ''
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
shared: true
},
legend: {
align: 'left',
verticalAlign: 'bottom',
layout: 'horizontal',
x: 0,
y: 0
},
plotOptions: {
series: {
cursor: 'pointer',
pointStart: Date.UTC(2016,0,1),
pointInterval: 86400000, //1 day
},
},
areaspline: {
lineWidth: null,
marker: {
enabled: false,
lineColor:'#e77378',
fillColor:'#ffffff',
lineWidth: 3,
radius: 4,
symbol:'circle'
}
}
},
series: [{
name: 'Visits',
color: '#d3d3d3',
data: [750,850,1000,1250,1050,950,720,850,650,750,950,1050,1150,1250,1450,1650,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20]
}, {
name: 'Installs',
color: '#e77378',
data: [550,650,750,850,950,1050,1150,1250,1150,1050,950,850,750,650,550,450,750,20,20,20,20,20,20,20,20,20,20,20,20,20,20]
}]
});
});
I want to change the font of title, data label and tooltip to Bootstrap default default font in the pie chart (I'm using Highchart library to show the chart). I'm How can I change these? Tried to add fontFamily but it didn't work.
var chart = new Highcharts.Chart({
chart: {
renderTo: $(element).attr('id'),
backgroundColor: '#F8F8F8'
},
title: {
text: "Space Used by Users",
fontFamily: 'Helvetica'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.sizeText}',
style: {
fontSize: '11px'
}
},
showInLegend: true
}
},
credits: {
enabled: false
},
tooltip: {
pointFormat: '{series.name}: <b>{point.sizeText}</b>'
},
series: [{
type: 'pie',
data: [
{
name: 'Personal Usage',
y: scope.item.personalUsage,
sizeText: scope.item.personalUsageSizeText
},
{
name: 'Shared Usage',
y: scope.item.sharedUsage,
sizeText: scope.item.sharedUsageSizeText
}
]
}]
});
How to change the font to default bootstrap?
You are only setting the font for the chart title. The below code sets the font globally for the pie chart.
Highcharts.setOptions({
chart: {
style: {
fontFamily: 'Helvetica'
}
}
});
Have put together a simple chart in Highcharts which is compiling from data supplied:
$(function() {
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
credits: {
enabled: false
},
title: {
text: 'Chart'
},
xAxis: {
type: 'datetime'
},
rangeSelector: {
buttonTheme: { // styles for the buttons
fill: 'none',
stroke: 'none',
style: {
color: '#039',
fontWeight: 'bold'
},
states: {
hover: {
fill: 'white'
},
select: {
style: {
color: 'white'
}
}
}
},
inputStyle: {
color: '#039',
fontWeight: 'bold'
},
labelStyle: {
color: 'silver',
fontWeight: 'bold'
},
selected: 1
},
series: [{
name: 'Data',
data: [
[1325376000,102.2],
[1328054400,104.5],
[1330560000,106.7],
[1333238400,109.8],
[1335830400,122.1],
[1338508800,124.3],
]
}]
});
});
However, the date data (e.g. 1325376000) renders simply as hours on the x-axis on the chart and the dates show in the top appear as 1970... can you tell me where I have gone wrong? Many thanks.
Highcharts expects its dates in milliseconds. I think you are supplying seconds?
You have i.e 1325376000 which is timestamp, (date in 1970). Do you use UNIX timestamps or other? Which date should be? You can use i.e Date.UTC() to prepare appropaite date http://www.w3schools.com/jsref/jsref_utc.asp