Looks like none of the d3 based charting libraries like nvd3, c3js support rounded corner for bar charts.
I need bars in the bar charts to look like as shown below, with gradient and rounded corners for my project.
Any hack or config to achieve this in c3js?
Need to override c3js function generateDrawBar and provide logic to get rounded corner, generally c3js path element consists of four points corresponding to four corners of the bar.
Now you need to provide logic to have multiple points at the top-left and top-right corners of the par to smoothen the bar corners.
There are still several cases:-
1) rounded corners for stacked bar charts.
2) rounded corners for negative values, bars pointing downwards or opposite direction.
rounded corner bars jsFiddle
rounded corner c3js bar charts snapshot
var chart = c3.generate({
bindto: '#chart',
padding: {
left: 200,
right: 100,
top: 20,
bottom: 20
},
data: {
x: 'x',
labels: true,
columns: [
['data1',40, 30, 200, 100, 400, 150, 250, 50, 100, 250,67,190,48,123,76,54,254],
['x','Travel and Hospitality','Life Science and Pharma', 'Saas and Cloud', 'Hi-tech Manufacturing', 'Software', 'Business Services', 'Govt/Public Sector', 'Energy', 'Manufacturing', 'Healthcare','Media','Internet','Retail','Biotech','Automobile','Consumer Goods','Financial Services']
],
type: 'bar'
},
axis: {
rotated: true,
x: {
type: 'category',
tick:{
multiline: false
}
}
},
legend: {
show: false
},
tooltip: {
show: false
},
bar: {
width: {
ratio: .7
},
spacing: 2
}
});
Related
The Problem:
I am using polar area chart. For slices in this chart, each value after the largest value should appear one level smaller. The level is as follows: for example, if the value after a 38 slice is 6, it should look like 37. Or I should be able to set it to the level I want. My question is all about sizing the slices on the polar area.
What I get:
What I want:
Sorry for my bad drawing. You can think what i want is like:
scaling very small slices close to large slice.
Methods I tried:
I tried changing the scale and ticks parameters from the link chartjs axes settings but without success.
I put the index data after sorting the array as data into the dataset. It worked as I wanted, but this time the values appeared as index values.
Charts.js polar area scales I tried this also but not worked.
A solution can be reached from the two methods I tried, but I could not.
Code example here:
function SetWorkflowChart(labels, datas, labelColors) {
//label colors
// workflow stats chart
const workflowdata = {
labels: labels,
datasets: [{
normalized: true,
data: datas, // example data: [38, 5,3]
backgroundColor: labelColors,
borderColor: "rgba(0, 0, 0, 0.0)"
}]
};
const workflowconfig = {
type: 'polarArea',
data: workflowdata,
options: {
scales: {
r: {
grid: {
display: false
},
ticks: {
display: false //try2 i tried to set ticks for scale
},
suggestedMin: 5, //try1
suggestedMax: 20,//try1
}
},
plugins: {
legend: {
display: false,
position: "right"
},
},
responsive: false
}
};
workflowChart = new Chart(
document.getElementById('WorkFlowStatsChart'),
workflowconfig
);
}
I'll be pleased if you pay attention.
It is possible to realize a smooth animation when changing the pie chart data? I did something similar before with scatter plots, indicators and bar charts, but my solution does not work for pie charts.
So, is a smooth animation possible with plotly js? Are pie charts not supported yet?
Codepen example: https://codepen.io/michaelkonstreu/pen/yLaEBJr
Draw chart:
function drawChart() {
generateRandomValues();
let graph = document.querySelector('#graph');
let plotWidth = graph.getBoundingClientRect().width;
let plotHeight = graph.getBoundingClientRect().height;
let data = [{
type: "pie",
values: VALUES,
labels: LABELS,
textinfo: 'percent',
automargin: true,
}];
let layout = {
paper_bgcolor: 'rgba(0,0,0,0)',
plot_bgcolor: 'rgba(0,0,0,0)',
width: plotWidth,
height: plotHeight,
margin: { "t": 0, "b": 0, "l": 0, "r": 0 },
showlegend: true,
}
Plotly.newPlot(graph.id, data, layout, { displaylogo: false, responsive: true, staticPlot: true });
}
Animate chart:
function updateChart(){
generateRandomValues();
Plotly.animate('graph', {
data: [
{
y: VALUES,
x: LABELS,
}
],
traces: [0]
},
{
transition: {
duration: 750, easing: 'cubic-in-out'
}
}
)
}
Has the documentation's says (updated instantaneously)
Currently, only scatter traces may be smoothly transitioned from one
state to the next. Other traces are compatible with frames and
animations but will be updated instantaneously.
https://plotly.com/javascript/animations/
I would like to set my area range (the blue horizontal bar) only on the red bar (fidding the width of the red bar) but I cannot find a solution to do this. Plot band don't work because it's full width on x axis. Could you help me please ?
On this try I managed to set the area range (blue horizontal bar) but it created another entry on X axis ("1"), I want to keep only the first entry "Omburu" with the same disposition of yellow, orange and red bar. With additionnal horizontal blue bar on the red bar who is set between to values following "Puissance kW" scale.
The JSFiddle is here : https://jsfiddle.net/poloh11/1qzfgopy/11/
Thanks a lot
{
name: 'Range',
data: [
[1000, 1500],[1000, 1500]
],
type: 'arearange',
lineWidth: 0,
color: Highcharts.getOptions().colors[0],
fillOpacity: 0.3,
marker: {
enabled: false
},
yAxis: 1
}
Use columnrage series instead. It has common properties with column series (pointRange, pointPadding etc.) that allow to adjust it similarly. The following configuration works for me:
{
name: 'Range',
data: [
[1000, 1500]
],
type: 'columnrange',
lineWidth: 0,
color: 'rgba(149,206,255,0.7)',
marker: {
enabled: false
},
yAxis: 1,
pointPlacement: 0.3,
pointRange: 0.33,
borderWidth: 0
}
Live demo: https://jsfiddle.net/BlackLabel/9czvmhsx/
API reference: https://jsfiddle.net/BlackLabel/9czvmhsx/
I am checking Stacked Charts in Flot and I found out something weird in the Bar Chart.
I tried using this :
http://jsfiddle.net/zNXBd/41/
In this sample codes, try to hover your mouse on the stacked lines. Hover is working.
Now, this time, please try to change "lines" to "bars" and run again.
ds.push({
data:completes,
label: "Complete",
yaxis: 2,
stack:true,
bars: {
show: true,
fill: true,
order: 2,
}
});
ds.push({
data:screeners,
label: "Pre-Screened",
yaxis: 1,
bars: {
show: true,
fill: true,
order: 1,
}
});
ds.push({
data:holds,
label: "Holds",
yaxis: 2,
stack:true,
bars: {
show: true,
fill: true,
order: 3,
}
});
Notice that the bars are not anymore hoverable. Seems like there's an issue in this part.
Could you please help me how to fix this issue?
It seems your bars are too thin for the hover to trigger.
You might need to put a barWidth in your bars options.
By default, the barwidth is 1, in x-axis unit. In a time axis, 1 = 1ms, and at your scale, a one ms width bar isnt represented (we only see the stroke, not the bar itself)
From the doc:
"barWidth" is the width of the bars in units of the x axis (or the y axis if "horizontal" is true), contrary to most other measures that are specified in pixels. For instance, for time series the unit is milliseconds so 24 * 60 * 60 * 1000 produces bars with the width of a day.
example:
bars: {
show: true,
fill: true,
order: 2,
barWidth: 1*3600*1000
}
Here is your fiddle with barwidth set at 1 hour:
http://jsfiddle.net/zNXBd/42/
I'm trying to create a chart using highcharts that includes both a column series and a scatter series with a custom point marker. The series will contain slightly different sets of data, but will overlap for the most part and will always have the same x-axis values.
I've set it up, but the problem is that it's not lining up perfectly. Some of the scatter series' points are shifted one or two pixels to the left of the corresponding bar.
Any ideas about how to fix this?
{
chart: {
animation: false
},
xAxis: {
tickInterval: 1
},
series: [{
type: "column",
borderWidth: 0,
pointWidth: 20,
name: "col"
},
{
type: "scatter",
states: { hover: { enabled: false } },
marker: { symbol: 'url(symbol.png)' }
}]
}
And here's a screenshot of what's happening:
Indeed it looks like a bug, also with standard markers, so I've decided to report it to our developers https://github.com/highslide-software/highcharts.com/issues/1843