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.
Related
I want to add space between two bars in vertical bar graph using react-chart-js
in below image I want to center align all the bars in Bar graph at center by adding some extra space to left and right of all the bars.
I tried using:
scales: {
xAxes: [{
categoryPercentage: 1.0,
barPercentage: 1.0
}]
But this only changes width of bars I want to give spacing on both sides of bars without changing the width of the bars like this:
So I created a bar chart using echarts(v4.6.0) library inside Reactjs project. It has legend, data series chunked into groups with same colour and dataZoom slider. Every legend label corresponds to particular group of bars in the graph(they have same colours). However at the moment if user clicks on legend label, bars that correspond to this label disappears. What I want to achieve is when user clicks on legend label, the chart needs to zoom in to the group of bars that correspond to it instead of hiding them. Is there any way to do this?
In the common practice to make bar selected you can use the emphasis, it's style set activated by mouseover (something like rules declaration under :hover in CSS), for example (see tutorial):
itemStyle: {
// default styles
normal: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
// activated by mouseover
emphasis: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.8)'
}
}
If you need just to show bar in focus, it's easy:
Define emphasis styles.
Capture event legendselectchanged on legend component and suppress default behavior (see workaround) for prevent series disappear.
Dispatch highlight action for series or dataIndex and bar will be looks like selected.
I could be wrong, but as far as I know to zoom single (and stacked) bar it's not easy task. There are several unconventional ways like a draw resized bar clone above original, manipulations with datazoom component and recalculate/update bar data on mouseover and then return back old data on mouseout. Let me know if you choose one of these options I'm will try to help you.
when all the values are 0 in the chart and I don't have a max axis value I am getting blank space in place of bars
You need to increase gridZIndex property for yAxis:
yAxis: {
gridZIndex: 4,
...
}
Live demo: https://jsfiddle.net/BlackLabel/0e89puxL/
API Reference: https://api.highcharts.com/highcharts/series.column.minPointLength
the grid line overlapps the bar when we add z-index
Ran this example from Angular NVD3's 'live edit' area.
http://krispo.github.io/angular-nvd3/#/
I opened it in Plunkr: Stacked Area Chart
As per the documentation,you need to add the following code, to hide the x and y axes.
showXAxis: false,
showYAxis: false,
You can add it after line number 19(in plunkr -> app.js)
After adding the above code, it doesn't work. The chart shows up and then dissapears.
But the same works for other charts, except for stacked area chart.
[I have tried it on line-chart, filled-line-chart, bar-chart]
Awaiting a reply.
Ok,
Figured this one out.
Zoom is enabled for this chart (app.js -> line:31)
Rolling the mouse zooms into the chart, and it expects the axis to be enabled (to understand the chart better).
Disabling the axis for a zoomable chart may not make sense, as one would not understand, what portion/section of the chart is showing after you have zoomed in.
Thank you. :-)
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.