We Keep Coding

Highcharts: add custom text bottom left, like credits?

Highcharts can have a customized credits section; and that also has an alignment.
I would like to have both a url on the bottom-right, and a custom text (i.e. the current date/time) on the bottom-left.
What would be the best way to add that, keeping the same look-and-feel as the credits?

Use the SVGRenderer tool to render a custom text.
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label
Check the included demo.
EDIT:
Here is a simple example how you can achieve it: https://jsfiddle.net/BlackLabel/x3om10L8/
chart: {
events: {
render() {
let chart = this,
credits = chart.credits,
creditsBB = credits.getBBox();
if (chart.customLabel) {
// keep label responsive
chart.customLabel.destroy();
}
chart.customLabel = chart.renderer.label('my custom text', 0, creditsBB.y - 5).css(credits.styles).add();
}
}
},
API: https://api.highcharts.com/highcharts/chart.events.render

How to show or hide Primefaces chart Legend independently when you have two charts in the same view?

I have 2 charts in the same page. I'd like to show legends just in one chart, not both, but I have just a global solution. Thats my javascript code:
$.jqplot.preDrawHooks.push(function () {
this.legend.show = true;});
and my xhtml:
<p:chart id="chart17" responsive="true" type="bar" model="#{chart17Bean.barModel}" />
<p:chart id="chart18" responsive="true" type="bar" model="#{chart18Bean.barModel}" />
Edited: I'm using Primefaces 6.1

Add this JS function on page
function removeLegend()
{
this.cfg.legend = {
show: false
};
}
and then in your managed bean add
barModel.setExtender("removeLegend");
where barModel is model of chart you want to have legend hidden.

Primefaces 8, Chart Js, you could set legend display to false
Legend legend = new Legend();
legend.setDisplay(false);
options.setLegend(legend);

Solved my issue
yourChart.options = {
legend: {
display: false,
}
};

How to disable Stacking on an individual series using Primefaces jQplot implementation

I am using Primefaces 6 for my companys charting needs, which relies on jQplot.
For a project, I am trying to overlay a line chart on a stacked bar chart with negative values, to obtain something like this:
The problem is that when I try to add a linechartseries to the same model as the two barchartseries , the linechart becomes a part of the stack when setting setStacked(true); on the model, because Primefaces seems to not allow individual disabling of stacking on series, only per model. So I end up with this when rendering the chart with
<p:chart type="bar" model="#{backingBean.cartesianChartModel}"/>
After some investigation I have notoced that jQplot is capable of disabling Stacking on individual series by passing disableStack : true in the JS options, so the question is if it's posssible to override this in some way on the rendered page,either via PF or via some JS hack? I feel that using the extender only apples to the entire model?
Related issues: Disable individual stacking

By pouring through the documentation I found a solution to the problem, if not the question:
It seems that Primefaces allows for individual series to be excempt from the stack in the series creation in this version, by passing
LineChartSeries.setDisableStack(true);
Simple as that.

I guess it may be possible. I used the extender functionality for some jqPlot hacks in the past.
In my case, for example, I had a Donut Chart defined with an extender function as follows:
private void createDonutModel() {
donutModel = new DonutChartModel();
donutModel.setLegendPosition("s");
donutModel.setLegendPlacement(LegendPlacement.OUTSIDE);
donutModel.setSliceMargin(4);
donutModel.setDataFormat("value");
donutModel.setShadow(false);
donutModel.setExtender("donutExtender");
donutModel.setSeriesColors("B81C40, FFA600, 79B54A");
}
The corresponding javascript was doing some changes to the jqPlot:
/**
* Customized jqPlot JQuery layout of the Donut Chart for Status Dashboard.
*/
function donutExtender() {
this.cfg.seriesDefaults = {
// make this a donut chart.
renderer:$.jqplot.DonutRenderer,
rendererOptions:{
thickness: 26,
ringMargin: 0,
fill: true,
padding: 0,
sliceMargin: 4,
// Pies and donuts can start at any arbitrary angle.
startAngle: -90,
showDataLabels: false,
// By default, data labels show the percentage of the donut/pie.
// You can show the data 'value' or data 'label' instead, or 'percent'
dataLabels: 'value',
shadow: false
}
}
this.cfg.gridPadding = {
top: 0, right: 0, bottom: 0, left: 0
}
this.cfg.legend = {
show: false
}
this.cfg.grid = { drawBorder: false,
shadow: false,
background: "transparent"
};
}
So you may try something like this in your case ?
Leave the extension configuration of your series empty, except for the one you are interested in...
function chartExtender() {
this.cfg.series = [
{ //...
},
{ // ...
},
{
disableStack: true
}
]
}
Worth having a shot ...

Chart.js bar chart: show tooltip on label hover

I'm using Chart.js library to draw a bar chart and I want to show tooltip not only on bar hover, but also on x-axis label hover for that bar. I found onHover method for configuration, but it only lets me access the array of currently hovered bars, which isn't useful.
So, how can I access mouse event and maybe take position from there to compare it against bar labels positions? Or there is another way to do it?
My current configuration:
const countryChartOptions = {
hover: {
onHover: this.onChartHover,
},
};
const onHover = (activeElements) => {
console.log(activeElements);
};
It only prints out hovered bars data, but I'm stuck to figure out how to extend it for behavior I need.

What about :
options: {
tooltips: {
// Add this..
intersect: false
}
}

It works for me
options: {
tooltips:{
intersect : false,
mode:'index'
}
}

How to display data on hover inside doughnut chart in Angular Chart?

Hi how to display data on hover inside doughnut chart using Angular Chart
Something like this:

Extend the answer of Alesana from this:
How to add text inside the doughnut chart using Chart.js?
and register an additional plugin service:
Chart.pluginService.register({
beforeTooltipDraw: function(chart) {
if (chart.config.options.elements.center) {
if (chart.tooltip._active && chart.tooltip._active.length > 0) {
chart.config.options.elements.center.text =
chart.tooltip._active[0]._view.label + ':' + chart.tooltip._data.datasets[0].data[chart.tooltip._active[0]._index];
}
}
}
});
For the chart, you may also want to put:
options: {
tooltips: { enabled: false }
}
I know that it may not be a good idea to use _view, _data, etc. Please correct this to a better way to access the label and dataset values.