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.
Related
I am trying to have stacked bar with different color as below.
I could achive bar as below however looking for -
1. label under each block and count.
2. On click on one of the block, color for rest of the blocks should be changed (should be same as hover behaviour)
Any suggestion and help would be appreciated.
You can use stacked bar chart with enabled data labels:
plotOptions: {
bar: {
stacking: 'normal',
dataLabels: {
color: 'black',
enabled: true,
y: 80
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/wg46umjp/
API Reference: https://api.highcharts.com/highcharts/plotOptions.bar.dataLabels
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
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
}
In the example I added a column chart with range selector. I changed the chartType of range selector to ColumnChart. But its not changing to column chart. can some one help on this.
Also is there is any way to customize the design of the range selector as in this image.
valid chart types for the ChartRangeFilter are...
ui.chartType = 'AreaChart', 'LineChart', 'ComboChart' or 'ScatterChart'
in this case, use...
'ComboChart'
then set chart option...
ui.chartOptions.seriesType = 'bars'
e.g.
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control',
options: {
filterColumnIndex: 0,
ui: {
chartType: 'ComboChart',
chartOptions: {
seriesType: 'bars'
}
}
}
});
I am a very new to highstocks and I am trying to achieve something for which I couldn't find any documentation.
I have a stacked area chart. So at this stage the plotOptions looks
plotOptions: {
area: {
stacking: "normal"
}
}
And on a click of a button, I want to change it to
plotOptions : {
area: {
stacking: null (undefined, tried both)
}
}
thereby making it a basic area chart. There is no plotOptions update function in highstock and if I try to manually update it, it doesn't work. Any suggestions or ideas as to how I can make this work
Use chart.update() to update plotOptions.
chart.update({
plotOptions: {
series: {
stacking: null
}
}
})
example: http://jsfiddle.net/v3zcse3w/