Related
I'm trying to change one graphic, I want to hide the dataset labels, but nothing I tried is working.
Graphic
The library that I'm using is library:
import { ChartDataSets, ChartOptions, ChartType } from 'chart.js';
import { Color } from 'ng2-charts/public_api';
import { BaseChartDirective,Label } from 'ng2-charts';
This is my code:
labelsGraphic:[];
public lineChartData: ChartDataSets[] = [{data:[], label:""}];
public lineChartLabels:Label[];
public lineChartColors: Color[] = [
{ // blue
backgroundColor: '#13161a',
borderColor: '#257bcc',
pointBackgroundColor: 'rgba(148,159,177,1)',
pointBorderColor: '',
pointRadius:0,
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
},
];
public lineChartOptions: (ChartOptions & { annotation: any }) = {
responsive: true,
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
gridLines: {
display: false
}
}]
},
annotation: {
},
};
public lineChartLegend = false;
public lineChartType: ChartType = 'line';
I tried changing gridLines to ticks but I think this object is not modifying anything.
try put scales without using gridLines attributes for lower version
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false
}]
},
for latest versions try to disable ticks
scales: {
xAxes: [{
ticks: {
display: false
}
}],
yAxes: [{
ticks: {
display: false
}
}]
},
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,
}],
}}
/>
I am stuck with highchart data. I have few variables in array format and in want to display them in tooltip of the chart but it is showing whole array instead of a single entity per record.
Here is my code:
$json['sales'] = array();
$json['xaxis'] = array();
$json['revenue'] = array();
$json['sales']['name'] = $this->language->get('text_products');
$json['sales']['type'] = 'column';
$json['sales']['data'] = array();
switch ($range) {
default:
case 'day':
$results = $this->model_report_sale->getSaleVsOptions($filter_data, $date=1);
foreach ($results as $key => $value) {
$json['sales']['data'][] = $value['quantity'];
$json['revenue'][] = $value['total'];
$json['xaxis'][] = $value['xaxis'];
}
break;
and my ajax call code is below:
$.ajax({
type: 'get',
url: 'index.php?route=dashboard/sale/getSale&token=<?php echo $token; ?>&range=' + $(this).attr('href') + '&filter_option=' + $('#option .active a').attr('href'),
dataType: 'json',
beforeSend: function() {
$('.salevsoption').find('.progress_loading_bar').fadeIn();
},
complete: function() {
$('.salevsoption').find('.progress_loading_bar').fadeOut();
},
success: function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'sale_vs_option',
type: 'line'
},
title: {
text: ''
},
subtitle: {
text: ''
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
xAxis: {
categories: json['xaxis'],
crosshair: true
},
yAxis: [{ // Primary yAxis
labels: {
//format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Products',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}],
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.0f}'
}
}
},
tooltip: {
shared: true,
pointFormat: 'Products: <b>{point.y:.0f}</b><br/> Sales: <b>{point.revenue:.2f}</b>'
},
legend: {
layout: 'vertical',
align: 'left',
x: 360,
verticalAlign: 'top',
y: -15,
floating: true,
enabled: false
},
series: [
json['sales']
]
});
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
I have issue in tooltip section with {point.revenue:.2f}.
I get everything fine but didnot get revenue value in tooltip.
When i replace {point.revenue:.2f} with json['revenue'] it display whole array on each record of chart.
You will need to use formatter instead format API Doc
tooltip: {
formatter: function() {
return 'Products: <b>' + this.y + '</b><br/> Sales: <b>' + this.point.revenu + '</b>'
}
}
Fiddle
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]
}]
});
});