How to disable just the click effect on the billboard.js Donut Chart?
I tried different variants, but nothing works.
After some variations, I found the solution. This worked for me on billboard.js Donut Chart (v 3.0.3)
legend: {
item: {
onclick: function(id) {
false;
},
},
},
I used the reference from here https://naver.github.io/billboard.js/release/latest/doc/Options.html#.legend
Related
I've tried everything I can. If anyone can help me out, it'll be great. I want the numbers on the graphs and the legend gone
Legend and data-labels can be disabled by
const options = {
dataLabels: {
enabled: false
},
legend: {
show: false
}
}
EDIT
If you want to remove all the additional graphics, try using sparkline which will only keep the chart and hide everything.
sparkline: {
enabled: true
}
I am trying to add a plotline on click in multiple series line chart in reactjs. I am using stockchart of high chart, Please let me know how to add plotline with tooltip.
Sample Screenshot:
I prepared a demo which shows how to add the plotLine dynamically with the custom tooltip.
Demo: https://jsfiddle.net/BlackLabel/Lyr82a5x/
btn.addEventListener('click', function() {
chart.xAxis[0].addPlotLine({
value: 5.5,
color: 'red',
width: 2,
id: 'plot-line-1',
events: {
mouseover() {
let lineBBox = this.svgElem.getBBox();
tooltip.style.display = 'block';
tooltip.style.left = lineBBox.x + 'px';
},
mouseout() {
tooltip.style.display = 'none'
}
}
})
})
If something is unclear - feel free to ask.
API: https://api.highcharts.com/highcharts/xAxis.plotLines.events.mouseout
API: https://api.highcharts.com/class-reference/Highcharts.Axis#addPlotLine
I am using highcharts drilldown chart with multiple levels and I would like to show the users what path they have traversed while drilling down the chart. Is there a way to show that path next to the chart?
for example https://jsfiddle.net/crxmkgaz/
in this fiddle if I click on Chrome and then on v63.0 the path should show like chrome -> v63.0, and should update if the user drill up.
ps: I am using react.
Thanks in advance.
You can use drilldown and drillup events to add information about drilldown level, for example in this way:
chart: {
type: 'pie',
events: {
drilldown: function(e) {
var newEl = document.createElement('span');
newEl.innerText = ' --> ' + e.seriesOptions.name
path.appendChild(newEl);
},
drillup: function() {
path.children[path.children.length - 1].remove();
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/8mLhy31p/
API Reference:
https://api.highcharts.com/highcharts/chart.events.drilldown
https://api.highcharts.com/highcharts/chart.events.drillup
I've searched extensively for this issue here and haven't been able to figure this out. I have a google chart in my app and have a callback function in place to get the details of each point when selected so that I can update a modal to display more info elsewhere.
However, when I have this callback activated and the user clicks the item, the crosshairs do not stay. When I don't have the callback active, they do remain and I get a nice small circle around the selected point like this:
image of crosshairs
Here are the chartevent details I have in place which are working to return the details of the point. Is the chartevent option perhaps overriding a crosshair default?
Grateful for any advice.
Cheers.
const chartEvents = [{
eventName: "select",
options: {
tooltip: {
trigger: "selection"
}
},
callback: ({ chartWrapper }) => {
const chart = chartWrapper.getChart().getSelection()[0].row;
this.setState((prevState) => ({ selectedMonth: chart }))
this.setChangedMonth()
}
}]
Labels on the pie chart are fine to me.
Labels outside of the pie chart are not, I would like to make these disappear since on Iphone or a screen that size, labels pop out of the pie chart and are out of the screen most of the time.
I did not find anything in Sencha Architect that allowed me to overide this mechanism for labels. Would someone have an idea?
You have to extend Ext.chart.series.sprite.PieSlice and override the method sliceContainsLabel:
Ext.define('yourNamespase.CustomPieSlice', {
alias: 'sprite.custompieslice',
extend: 'Ext.chart.series.sprite.PieSlice',
inheritableStatics: {
def: {
defaults: {
doCallout: false,
rotateLabels: false,
label: '',
labelOverflowPadding: 10,
renderer: null
}
}
},
sliceContainsLabel: function () {
return 1;
}
});
And so the labels will be always inside the pie chart.