Related
I am working on a large scale application and it would be very helpful to place the labels on either pie charts or doughnut charts outside of the chart itself.
This plugin, outerLabels is exactly what I am looking for but I am having trouble getting it to output anything.
I have been unable to find a way to get this done using Chart.js and that is what I am stuck working with for now.
I have imported the plugin both like
import {} from 'chartjs-plugin-outerlabels';
and also like import 'chartjs-plugin-outerlabels';
Here is an example of how I am setting the chart options:
function getPieChartOptions(chartTitle: string) {
const options: ChartOptions = {
responsive: true,
plugins: {
outerLabels: {
fontNormalSize: 12,
fontNormalFamily: 'sans-serif',
},
legend: {
display: true,
labels: {
usePointStyle: true,
font: {
family: 'sans-serif',
size: 12,
}
}
},
title: {
display: true,
text: chartTitle,
color: 'black',
padding: 5,
font: {
size: 16,
family: 'sans-serif',
}
},
datalabels: {
color: 'white',
formatter: commas.format,
}
},
};
return options;
}
Here is an example of a doughnut chart within the project itself:
If anybody can help getting this plugin to work, or has another solution to this problem it would be greatly appreciated!
This works for me without the datalabels field (as it requires installing chartjs-plugin-datalabels.js library).
So basically the ChartOptions setting is similar to the one you provided.
import 'chartjs-plugin-outerlabels';
getPieChartOptions(chartTitle: string) {
const options: ChartOptions<'doughnut'> = {
responsive: true,
plugins: {
outerLabels: {
fontNormalSize: 12,
fontNormalFamily: 'sans-serif',
},
legend: {
display: true,
labels: {
usePointStyle: true,
font: {
family: 'sans-serif',
size: 12,
},
},
},
title: {
display: true,
text: chartTitle,
color: 'black',
padding: 5,
font: {
size: 16,
family: 'sans-serif',
},
},
tooltip: {
enabled: false,
},
},
};
return options;
}
And this is how to render the chart to the canvas element.
#ViewChild('MyChart', { static: true }) chart: ElementRef<HTMLCanvasElement>;
ngAfterViewInit() {
const ctx = this.chart.nativeElement.getContext('2d');
new Chart<'doughnut'>(ctx, {
type: 'doughnut',
data: {
labels: [['Download', 'Sales'], ['In', 'Store', 'Sales'], 'Mail Sales'],
datasets: [
{
data: [300, 500, 100],
},
],
},
options: this.getPieChartOptions('doughnut'),
} as ChartConfiguration<'doughnut'>).draw;
}
Demo # StackBlitz
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
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,
}],
}}
/>
We want to customize the faceted search by passing extra argument in the faceted search URL and read it in org\alfresco\slingshot\search\search.get.js---->search.lib.js.
http://localhost:8080/share/page/dp/ws/faceted-search#searchTerm=Koala.jpg&scope=repo&nodeRef=test
In searchDocLib json ,we have nodeRef value assigned it to selectedContainer but that argument is not coming in search.get.js. Basically how to pass extra argument in searchDocLib?How to enable logs for faceted-search.get.js so that logger statements should be printed in share.log?
var noderef = (page.url.args["nodeRef"] != null) ? page.url.args["nodeRef"] : "";
logger.log(page.url.templateArgs.nodeRef+"....nodeRef = "+nodeRef);
// Build the searchDocLib model
var searchDocLib = {
id: "FCTSRCH_SEARCH_RESULTS_LIST",
name: "alfresco/documentlibrary/AlfSearchList",
config: {
viewPreferenceProperty: "org.alfresco.share.searchList.viewRendererName",
view: viewRendererName,
waitForPageWidgets: true,
useHash: true,
useLocalStorageHashFallback: true,
hashVarsForUpdate: [
"searchTerm",
"facetFilters",
"sortField",
"sortAscending",
"query",
"scope",
"selectedContainer"
],
selectedScope: "repo",
useInfiniteScroll: true,
siteId: null,
rootNode: repoRootNode,
repo: false,
selectedContainer: noderef,
additionalControlsTarget: "FCTSRCH_RESULTS_MENU_BAR",
additionalViewControlVisibilityConfig: hideOnZeroResultsConfig,
widgets: [
{
id: "FCTSRCH_SEARCH_ADVICE_NO_RESULTS",
name: "alfresco/documentlibrary/views/AlfSearchListView",
config: {
widgetsForNoDataDisplay: widgetsForNoDataDisplay,
a11yCaption: msg.get("faceted-search.results.caption"),
a11yCaptionClass: "hiddenAccessible",
widgetsForHeader: [
{
id: "FCTSRCH_THUMBNAIL_HEADER_CELL",
name: "alfresco/documentlibrary/views/layouts/HeaderCell",
config: {
label: msg.get("faceted-search.results.heading.thumbnail"),
class: "hiddenAccessible",
a11yScope: "col"
}
},
{
id: "FCTSRCH_DETAILS_HEADER_CELL",
name: "alfresco/documentlibrary/views/layouts/HeaderCell",
config: {
label: msg.get("faceted-search.results.heading.details"),
class: "hiddenAccessible",
a11yScope: "col"
}
},
{
id: "FCTSRCH_ACTIONS_HEADER_CELL",
name: "alfresco/documentlibrary/views/layouts/HeaderCell",
config: {
label: msg.get("faceted-search.results.heading.actions"),
class: "hiddenAccessible",
a11yScope: "col"
}
}
],
widgets: [
{
id: "FCTSRCH_SEARCH_RESULT",
name: "alfresco/search/AlfSearchResult",
config: {
enableContextMenu: false
}
}
]
}
},
{
id: "FCTSRCH_GALLERY_VIEW",
name: "alfresco/documentlibrary/views/AlfGalleryView",
config: {
showNextLink: true,
nextLinkLabel: msg.get("faceted-search.show-more-results.label"),
widgetsForNoDataDisplay: widgetsForNoDataDisplay,
widgets: [
{
id: "FCTSRCH_GALLERY_VIEW_THUMBNAIL_DOC_OR_FOLDER",
name: "alfresco/search/SearchGalleryThumbnail",
config: {
widgetsForSelectBar: [
{
id: "FCTSRCH_GALLERY_VIEW_MORE_INFO_OR_FOLDER",
name: "alfresco/renderers/MoreInfo",
align: "right",
config: {
filterActions: true,
xhrRequired: true
}
}
],
publishTopic: "ALF_NAVIGATE_TO_PAGE",
renderFilter: [
{
property: "type",
values: ["document","folder"],
negate: false
}
]
}
},
{
id: "FCTSRCH_GALLERY_VIEW_THUMBNAIL_OTHER",
name: "alfresco/search/SearchGalleryThumbnail",
config: {
widgetsForSelectBar: [
{
id: "FCTSRCH_GALLERY_VIEW_MORE_INFO_OTHER",
name: "alfresco/renderers/MoreInfo",
align: "right",
config: {
filterActions: true,
allowedActionsString: "[\"document-delete\"]",
xhrRequired: true
}
}
],
publishTopic: "ALF_NAVIGATE_TO_PAGE",
renderFilter: [
{
property: "type",
values: ["document","folder"],
negate: true
}
]
}
}
]
}
},
{
id: "FCTSRCH_INFINITE_SCROLL",
name: "alfresco/documentlibrary/AlfDocumentListInfiniteScroll"
}
]
}
};
I've written a blog post that covers customizing the search page. Although it isn't exactly the same use case, the principle remains the same - you're going to want to create your own SearchService (extending the default one) and then swap yours for the default one in the faceted-search page model. You'll want to extend the onSearchRequest function to include the extra request parameter.
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]
}]
});
});