I have a stacked bar chart and I want to always display the tooltip on my stacked bar. I manage to get it to work but the result is not what I want. It displayed the tooltip for each stacked bar separately; what I want is to show the tooltip for both the stacked bar in one / grouped.
By using tooltip option mode: 'label' or 'index', it works but only work on hover (mouse over). I want to display the grouped tooltip always on the graph.
Below the code that I am currently using:
In plugin service register, below was added to always show the tooltip on the graph:
Chart.pluginService.register({
beforeRender: function(chart) {
//chart.options.tooltips.mode = 'index';
var datasets = chart.data.datasets;
chart.pluginTooltips = [];
for (i = 0; i < datasets.length; i++) {
for (j = 0; j < datasets[i].data.length; j++) {
if (Number(datasets[i].data[j]) > 0) {
chart.pluginTooltips.push(new Chart.Tooltip({
_chart: chart.chart,
_chartInstance: chart,
_data: chart.data,
_options: chart.options.tooltips,
_active: [chart.getDatasetMeta(i).data[j]]
}, chart));
}
}
}
}, // end beforeRender
afterDatasetsDraw: function(chart, easing) {
// Draw tooltips
Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
tooltip.initialize();
tooltip.update();
tooltip.pivot();
tooltip.transition(easing).draw();
});
} // end afterDatasetsDraw
});
In the chart option, below tooltip option was added:
*tooltip with label mode was to show the tooltip as a group; this only works on hover, I want to get it to work to always display on the graph.
tooltips: {
mode: 'label',
Below the result that I currently get:
Below the expected result that I want to have (it only shows on hover now):
My question is: How can I draw the grouped tooltip (as shown above) to display always (fixed) on the graph.
Related
I have common x axis for all 3 charts. Want to show X-axis label only for the last chart selected. I wouldn't know exactly how many chart I would select. So this has to be dynamic.
I tried below:
I initially disable x-axis label for all charts. Need to enable x-axis label only for the last chart selected(Which would be the bottom most chart).
document.querySelectorAll('#checkboxes input').forEach(function(checkbox) {
checkbox.addEventListener('change', (e) => {
const id = e.target.dataset.id,
checked = e.target.checked,
checkedCheckboxes = document.querySelectorAll('#checkboxes input:checked').length,
node = document.querySelector(`#chart${id}`);
const chartEps = [
chartEp1,
chartEp2,
chartEp3,
]
console.log("id", id)
//chartEps[id].xAxis[0].options.labels.enabled = true
// The ID has to be the id of last chart selected. So that only for last chart xAxis label is enabled.
chartEps[id].update({
labels: {
enabled: true
},
});
Please see fiddle: https://jsfiddle.net/xhLt6a01/8/
Instead of dynamic x axis label, I also tried setting empty chart with x axis which need to shown at all times at the bottom (commented code at the bottom of fiddle).
But couldn't get both options to work. I would really appreciate If I could get any help on this.
To dynamically enable/disable the labels, in the update call, set the option xAxis, but (somehow unexpectedly) it should be at the top level of the options object, at the same level as chart:
Highcharts.charts.forEach(function(chart, i) {
chart.update({
chart: {
height: height / checkedCheckboxes
},
xAxis:{
labels: {
enabled: ...your boolean criterion here for chart i...
}
}
});
});
For the particular case when you want to enable the axis only for the last shown chart I'd use something on lines of
{enabled: selected[i] && selected.indexOf(true, i+1) === -1}
where selected is an array that keeps track on selected checkboxes, that is equivalent to shown charts. Take a look at this fiddle for a modified version of your original code.
I need to set a different border color for the legend than the actual chart; whenever I add border color to the chart data, it gets applied to both legend and chart. And I couldn't find any options for setting different border colors for the legend in documentation
Here's a screenshot of what I'm trying to achieve, any idea?:
The only way I have found to do this and some other customisation on the legend is to implement the legend item interface.
The accepted answer here in combination with the legend item interface should be a good start.
Here's a jsfiddle that I made from that answer, but updated for chartjs 3.7.1. The main part to focus on is this:
options: {
plugins: {
legend: {
labels: {
usePointStyle: true,
generateLabels: function(chart) {
var data = chart.data;
if (data.labels.length && data.datasets.length) {
return data.labels.map(function(label, i) {
var meta = chart.getDatasetMeta(0);
var ds = data.datasets[0];
return {
text: label,
fillStyle: ds.backgroundColor[i],
strokeStyle: ds.legendOutline[i],
lineWidth: ds.borderWidth,
hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
index: i
};
});
} else {
return [];
}
}
}
}
}
strokeStyle is the outline property, and I've made a field in the dataset called legendOutline. legendOutline and the data from the dataset are both referenced with i, so the legendOutline[i] points to the label representing data[i]
I am using eCharts to create a stacked and grouped bar chart, it is my first time using eCharts. but clicking on axis label tick not working properly , I want when clicking on axis label tick (example: Brand1) it should hide that Brand but is not working, the code looks like:
myChart.on("click", (params) => {
if (params.targetType === "axisLabel") {
params.event.target.invisible = true;
params.event.target.silent = true;
params.event.target.scale[0] = 0;
params.event.target.scale[1] = 0;
// myChart.setOption();
console.log("params ", params, "option ", option);
}
});
you can check the full demo in demo
any help please?
I'm trying to show category axis for Amcharts Multi Panel Horizon chart. I tried setting the category axis property to true, but it enabled the x axis for all the charts.
"showCategoryAxis": true,
Is there a work around to show Multi horizon chart with a single x axis.
Here is demo with "showCategoryAxis": true,.
Modify the buildPanel function so that showCategoryAxis is set to false by default for all panels and then set one of them (presumably the last one) at the end of the init handler loop to false. You'll also want to set axisHeight to 0 in categoryAxesSettings so that the height of the last panel, or whichever one has the category axis enabled, doesn't shrink.
function buildPanel( dim ) {
return {
// ...
"showCategoryAxis": false,
// ...
};
}
//in addInitHandler:
for ( var i = 0; i < dimensions.length; i++ ) {
// ...
}
chartPanels[chartPanels.length - 1].showCategoryAxis = true;
chart.panels = chartPanels;
Demo
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'
}
}