Chart.js, adding footer to chart - javascript

Using Chart.js 2.0. I'm looking for a way to add a footer (line of text) at the bottom of the chart in order to display sources of data.
I tried to solve it via the option object, the same way as title and legend are included and modified. Like this:
`options: { ...
footer: {
display: true,
text: 'data from xy'
}
}`
I saw 'footer' several times mentioned in the documentation and ways to style it or use it in the context of 'tooltips', but haven't seen anything how to add it concretely.
EDIT/UPDATE:
I've found two workarounds (but no perfect solution) to add a footer to the chart while trying to solve this. In case someone is running into same problem like I did, here some suggestions how to solve this.
Nr. 1: adding a HTML element. This workaround has the disadvantage that the added HTML element is not shown if a user downloads the chart as a .png. Maybe this is the best solution, if the element doesn't have to be visible if a user downloads the chart as a .png.
`var myChart = new Chart(ctx, {
type: 'line',
data: { ... },
options: {
legend: { ... },
...
legendCallback: function(){
return '<p>bla bla</p>';
},
...
},
});
document.getElementById('legendID').innerHTML =
myChart.generateLegend();`
adding AFTER the canvas a div to append the new HTML element
<div id=legendID></div>
Nr. 2: adding another dataset which is empty but a label which contains the information that is supposed to be displayed. borderColor and backgroundColor set to transparent. Adding some empty labels (" ") gives some distance between labels and the footer which is added. The disadvantage of this workaround are the limited possibilities for styling.
Nr. 3: the solution of ana liza. This finally works best for my case since the added info is visible on the .png.

From the official docs:
Labeling Axes
When creating a chart, you want to tell the viewer what data they are viewing. To do this, you need to label the axis.
The scale label configuration is nested under the scale configuration in the scaleLabel key. It defines options for the scale title. Note that this only applies to cartesian axes.
You can add labels for both axes but in your case, since you only need it on the x-axis, your chart options should look similar to this.
var options = {
scales: {
xAxes: [
{
scaleLabel: {
display: true,
labelString: 'Party size',
fontColor: '#C7C7CC',
fontSize: 11
}
}
]
}
};

Related

Angular. Highcharts. Column Chart. Positioning of Columns on X-Axis

I have a highchart made with Angular.JS. Each column has its own stack level and is essentially managing its own group of data
My series is an array of objects that looks like this:
[{
name: seriesGroup.name,
data: [number],
xAxis: xAxisLevel,
stack: xAxisLevel
}]
The problem I'm having is that highcharts seems to automatically add some offset styling that moves each column out of position. Ideally I want all columns centered correctly like the one for Currency. See image above where you can see the x-positioning that's getting added to the rect tag.
Is there any parameter I can set to highcharts to disable this effect? I have not been able to find anything of the sort in the API docs.
Please take a look at the fiddle for a simplified version:
https://jsfiddle.net/nz0v8w5u/
You can make it setting appropriate plotOptions.series.groupPadding property. In your case 0.5 seems working as expected. Check the code and demo posted below.
Why do you add five xAxis instead of using just one? With one axis highcharts will automatically position columns properly and the code is much easier. Check this example: https://www.highcharts.com/demo/column-stacked
Code:
plotOptions: {
column: {
minPointLength: 1,
groupPadding: 0.5,
stacking: "normal",
dataLabels: {
enabled: false
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/7pL8mj1s/
API reference:
https://api.highcharts.com/highcharts/series.column.groupPadding

How to move Chart.js legend?

Following this example on their site, how would I move the "My First Dataset" legend to, say, below the chart instead of on top of it?
It doesn't appear to be a part of the documentation that I could find
According to mentioned http://www.chartjs.org/docs/#chart-configuration-legend-configuration, you need to add legend to options:
Chart.Bar(canvas, {
data: data,
options: {
legend: {
position: "bottom"
}}
})
See working jsfiddle.

Highcharts SolidGauge Label Resize Issue

Good morning/evening! I've spent most of my day looking at this to no avail, so it's time to appeal to a larger audience...
I'm using a Highcharts "solidgauge" chart wrapped in an ExtJS 4.2.2 container class. When I create the solidgauge, everything looks fine until I try to resize it. When I resize it, the series label moves up and off the gauge.
Good:
Bad (after resizing):
The culprit is a "Y" value I need to set initially so the "79%" shows up in the middle of the gauge, instead of way below it. Here's the init code:
me.series = [{
name: 'Uptime',
data: [80],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:2.5vw;color:black"' +
'>{y}%</span><br/></div>',
x: 0,
y: -65,
borderWidth: 0,
useHTML: true
},
tooltip: false,
type: 'solidgauge',
valueField: 'uptime'
}];
The "Y: -65" is causing the "79%" to move up the chart when resized. If I set the X and Y values to 0, the text resizes fine (it's just that the label is too far below the gauge).
I have no idea how to get that label to resize correctly with the chart when it's positioned to anything but [0,0] initially. I've looked at the chart.Render object, various CSS configs, overriding ExtJS event handlers, etc.
Does anyone have a suggestion on how to have the label centered inside the gauge AND cause it to position correctly when the chart is resized?
Thank you in advance for any help you can provide.
HTML properties like 2.5vw on label text size can't work in this case, because the chart is a canvas and on render it's like printed on the dom (try to inspect it on browser html dom), doing a dashboard with different charts I solved the problem removing the label, adding the label again, and calling:
chart.redraw();
next i write my old code to reset font size of labels, maybe something is changet, I were using Ext 4
setFieldTitleHeight: function(){
var view=this.getView(),
panelHeight=view.height;
var newFontSize=Math.floor((panelHeight/290)*16);
view.items.items[0].getAxes()[0].getTitle().setAttributes({fontSize: newFontSize+'px'});
},
setDataLabelSize:function(){
var view=this.getView(),
panelHeight=view.height,
serie=view.items.items[0].getSeries()[0],
assi=view.items.items[0].getAxes();
var newFontSize=Math.floor((panelHeight/290)*16);
var label=serie.config.label;
serie.config.label.fontSize= newFontSize+'px';
serie.setLabel(label);
Ext.iterate(assi,function(item,index,array){
item.getLabel().setAttributes({fontSize:newFontSize+'px'});
},this);
},

Chart.js V2 ticklines no grid

I'm using ChartJs V2. Trying to have no horizontal gridlines but still have a little tick-line at the ticks. How is this possible? I'm using angular-charts to set the global options currently:
scales: {
yAxes: [{
gridLines: {
display: false,
drawTicks: true,
}
}],
}
What I have:
What I want:
The gridlines display option must be set to true for the ticks part of the gridlines to be drawn.
To show only the ticks, use the drawOnChartArea option to turn off the gridlines on the chart.
scales: {
yAxes: [{
gridLines: {
display: true,
drawOnChartArea: false,
}
}],
}
EDIT:
JSFiddle
What you need for this are Chart.js plugins.
They let you handle what is happening when events like the rendering or the update are triggered.
For instance, in your case, we want to draw again the ticks which were erased via the display:false attribute of options.scales.yAxes.gridLines.
We will then need the afterDraw event. Plugins in Chart.js are created like this :
Chart.pluginService.register({
afterDraw: function(chart, easing) {
// Your code in here
}
});
Now that you know how to do, let's focus on what to do.
What we want is to redisplay the tick lines on the yAxes. But they were removed (as I said above).
We can't bring them back, but since Chart.js charts are using a <canvas> tag, we can try to draw them once again.
To do it dynamically (most I can at least), we will need to loop in the different ticks of your y axe and, by also getting the height of your axe, we will be able to draw our own ticks.
Here is a jsFiddle (improved by the OP) with some explanation about what we must do and of course a fully working example, and here is its preview :

FLOT plot chart legend CSS being overwritten

I am experimenting with the FLOT plot tool and having some problem with the legend. Specifically, the CSS for the legend must be being overwritten somewhere in my code because the legend is looking like this:
When I try to pass legend options to the plot, they do not appear. What do I need to do fix this CSS problem? Thanks.
Here is some of the code I am working with:
var options = {
series: {
lines: { show: true },
points: { show: true },
legend: {
margin: 5
}
}
};
$.plot("#flotcontainer", [ json ], options);
The margin option from flot specifies the distance to the plot edge which seems about right at 5 pixels. Try to set the position option too (see the documentation for more information).

Categories