I am facing following problems with the Extjs4 pie chart:
I am unable to change pie chart colors
I want to disable legend (not clickable)
please help me..
thanks
Changing pie colors is easy using the colorSet config:
series: [{
type: "pie",
colorSet: ["#f00", "#0f0", "#00f"],
...
}]
Disabling the click-behavior of legend is quite a bit trickier, because it is built in to the LegendItem component and there's no switch to turn it off. You could use the following hack to remove the disturbing listeners from Legend:
Ext.each(chart.legend.items, function(item) {
item.un("mousedown", item.events.mousedown.listeners[0].fn);
})
But I suggest you file a feature request to Sencha, as that kind of built-in behaviour should be configurable.
Related
I'm displaying a Chart.js doughnut chart via react-chartjs-2 in React, and by default, there are these line-box things showing for each doughnut section. Here's an example:
What are these line-box things called, and how do I turn them off?
Also, for what it's worth, they don't seem to show up by default in the base Chart.js library, but they show up for doughnut (and probably pie) charts in the react-chartjs-2 npm package. I've searched and searched, and tried toggling a bunch of options for the legend, legend labels and tooltips, but to no avail. I cannot figure out how to turn these off. Thank you for your help.
Thanks again to LeeLanalee for pointing me in the right direction.
Unbeknownst to me, there was a Chart.js global plugin set up for all the doughnut charts called chartjs-plugin-piechart-outlabels (https://www.npmjs.com/package/chartjs-plugin-piechart-outlabels). As per following SO post, I was able to disable the line-box labels for specific instances of the doughnut charts (in React) as follows:
ChartJs - Pie Chart - how to remove labels that are on the pie chart
options={ {
plugins: {
outlabels: false
}
} }
Thanks again!
In chart js is it possible to have each bar exactly under each scatter dot? in below images the first one correct and second one is not.
You can check demo here demo
any help please?
You can do it on a per-case basis. The problem is that both charts have different xAxis type (linear and category). Also the yAxis labels are of different length.
To solve the problem on the chart from your demo, you can change the options from your scatter chart as follows.
Define option scales.xAxes.offset: true to make it correspond to the default value defined for bar charts.
Add min and max to scales.xAxes.ticks to horizontally adjust the points with the bars.
scales: {
xAxes: [{
offset: true,
gridLines: {
display: false
},
ticks: {
min: -0.2,
max: 3.3,
Please have a look at your amended Demo.
In this example, the cursor is a crosshair when hovering over the entire chart area. I am using Highcharts React however and the above example uses jQuery.
I cannot get this to work with Highcharts React - I have found the documentation for plotOption.series.cursor here, but this only allows me to show a crosshair pointer when hovering over a data point, not the whole chart area.
How can I make this work in Highcharts React?
There was an extremely easy solution which was extremely hard to find which is:
chart: {
style: {
cursor: 'crosshair',
},
}
Search in the Highcharts docs and you will not find this.
I would like to disable label from Extjs pie chart.
If anyone has an example that would be greatly appreciated.
assuming that we are talking about Ext.chart.series.Pie, which inherits from Ext.chart.series.Series; the 4.x documentation for onCreateLabel(storeItem, item, i, display) states, that when display is set to false, the label will be not be displayed.
the 5.x documentation for Ext.chart.label.Label states, that there is a config hidden.
it's difficult to provide any code, while not even knowing which framework version it is. this question's op should provide more details and/or a fiddle, in order to allow proper answers. embedding ExtJS 5/6 GPL in a "code snippet" did not work out... however, here's a configuration which hides all the labels:
series: [{
type: 'pie',
label: {
display: false
}
}]
I've got a fiddle of a base layout I'm trying to add responsive configurations to.
My goal is to use a border layout where the navigation can change between the western region and the northern region depending on the window size and the layout config can switch between vertical and horizontal so that when the region is west the buttons are grouped vertically and when the region is north the buttons are grouped horizontally.
I know that by default, the layout type cannot be changed at runtime, but I found this forum thread where a user points out that if you use the box layout type (the parent of vbox and hbox) you can update the vertical config to change the grouping at runtime.
The fiddle I linked above is my attempt at prototyping that concept out.
The problem I'm running into is that the responsiveConfig cannot find the setters for the particular properties that I'm trying to change, and it's not just for the vertical config. Config items that I know have setters and I have seen work before in the responsiveConfig are not working as well:
Ext.layout.container.Box definitely has a setPack method.
Am I mis-configured somehow?
I posted to the thread in sencha's forums where the technique I was trying was described. The poster who answered the question originally answered my post with an updated fiddle showing the correct implementation.
I've added the responsive box implementation as well as the region switching into my fiddle.
Here's the responsive sections needed:
plugins: 'responsive',
responsiveConfig:{
wide:{
layout:{
type: 'box',
vertical: true,
pack:'start'
},
region: 'west'
},
tall:{
layout:{
type: 'box',
vertical: false,
pack: 'center'
},
region: 'north'
}
I think the important part to know here (and what was tripping me up) is that you have to include the type: 'box' in the layout config for the responsiveConfig property because responsiveConfig is not firing each individual setter for the layout (type, vertical, and pack), it's firing the overall layout setter method. If you don't include the type config in the object you give the layout config, it uses the default type which is 'auto'.
This is why in the screenshot I included in the original post the error messages in the javascript console where referring to Ext.layout.container.Auto and not Ext.layout.container.Box. The error message was right, Ext.layout.container.Auto doesn't have a setPack method.
Changing layouts at runtime is not currently supported. There is a feature request for it here:
https://www.sencha.com/forum/showthread.php?294082
Fiddle with a workaround:
https://fiddle.sencha.com/#fiddle/dqj
The error is complaining about auto layout having no setter for pack.
This tells me the layout is indeed being set during runtime, according to the value specified in the responsive layout config. Since there is none defined, just the vertical and pack, config, the layout type is interpreted as auto. Small changes in your fiddle, defining the layout type as below:
responsiveConfig:{
wide:{
layout:{
type : 'vbox',
pack:'start'
},
bodyStyle:{'background-color': 'orange'}
},
tall:{
layout:{
type : 'hbox',
pack: 'center'
},
bodyStyle:{'background-color': 'purple'}
}
},
And your error was gone.