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
Related
I'm using Google Charts to display charts on our website.
We want the charts to read properly from right-to-left.
I can find the <svg> elements and add style="direction: rtl;" to them. That will fix the text alignment, but it throws everything else off.
I want the axis labels to be on the right (or at least correctly aligned with the axis on the left).
I want the text to be aligned right-to-left.
Setting {'langugae': 'he'} in the load function has no rtl effect. All it does is change the langugae of the aria attributes.
Properly aligned (ltr) axis
After setting the style attribute of the svg.
EDIT (code):
google.charts.load('current', {'language': 'he'});
google.charts.setOnLoadCallback(() => {
this.drawVisualization();
});
drawVisualization() {
...
this.wrapper = new google.visualization.ChartWrapper(settings);
this.chartData = google.visualization.arrayToDataTable(this.tableData);
google.visualization.events.addOneTimeListener(this.wrapper, 'ready', () => this.chartReady());
}
chartReady(){
...
let svgs = document.getElementsByTagName('svg');
if (svgs && svgs.length > 0){
Array.from(svgs).forEach(element => {
element.setAttribute('style', 'direction: rtl');
});
}
}
there's a built-in property for this,
dataTable.rtlTable(true)
you can find more about it in their docs -
https://developers.google.com/chart/interactive/docs/gallery/table
בהצלחה!
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'
}
}
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.
I'm using the stacked area chart in NVD3, but I don't want it to show the three options for Stacked, Stream, and Expanded.
Is there a flag I can pass to remove the UI element to switch between them and pick which one to use?
You can pass .showControls(false) to the model to disable this.
$scope.options = {
chart: {
..
showControls: false,
}
};
Add showControls: false , to your options
Alternatively, if you're using angular-nvd3, you can use CSS.
svg {
.nv-controlsWrap {
display: none;
}
}
I am building a d3 data map:
http://datamaps.github.io/
When I click on a country, I want the border to change color. How do I assign an onclick event to a d3 path using datamaps? The svg paths seem to lack a CSS ID as well as any identifying hook.
You can use JQuery "done:function" and specify on("click") as below :
done: function(datamap) {
datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {
alert(geography.properties.name);
});
}
Refer to https://github.com/markmarkoh/datamaps for further detail.
You'll need both the done call back as well as the updateChoropleth function. For example, to turn each country black you would do:
done: function(datamap) {
datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {
var m = {};
m[geography.id] = '#000000';
datamap.updateChoropleth(m);
});
}