I am trying to create a waterfall chart using QuickChart. It looks there is no direct way to do such a thing in QuickChart. But, I'm looking if there is any workaround to accomplish this in QuickChart.
Are there any possibilities to do this?
No if quickchart does not support the custom chart type you need you cant use it with quickchart.
You will either need to implement chart.js yourself or look at the source code of quickchart, edit it so it does support the chart type you want to use and host it yourself.
It is easily doable with floating bars.
Paste the following chart configuration into https://quickchart.io/sandbox and click on the Chart URL in the right section of the window.
{
type: 'bar',
data: {
labels: ['Project Budget', 'Iteration 1', 'Iteration 2', 'Iteration 3', 'Iteration 4'],
datasets: [{
data: [750, [500, 750], [360, 500], [200, 360], 200],
backgroundColor: ['rgb(255, 0, 0)', 'rgba(255, 0, 0, 0.8)', 'rgba(255, 0, 0, 0.6)', 'rgba(255, 0, 0, 0.4)', 'rgba(255, 0, 0, 0.2)'],
categoryPercentage: 1,
barPercentage: 0.98
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
}
Further information about how it works, is available in this answer
Related
I'm not able to design butterfly chart using highcharts and echarts, I want to plot it as.
Please help me to achieve this
The basic config of the butterfly chart is based on the bar type of series and properly spaced yAxis and xAxis. Other configurations depend on your requirements. Here is a basic config example:
Highcharts.chart('container', {
chart: {
type: 'bar',
width: 600
},
xAxis: [{
categories: ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5'],
offset: -300
}],
yAxis: [{
reversed: true,
width: '40%',
},
{
offset: 0,
width: '40%',
left: '60%',
}
],
series: [{
data: [50, 60, 70, 79, 10],
}, {
yAxis: 1,
data: [10, 30, 30, 20, 70],
}]
});
Demo:
https://jsfiddle.net/BlackLabel/os8jcypr/
Expanded demo:
https://jsfiddle.net/BlackLabel/1Lp5rqjg/
I would like to emphasise the difference between 2 different series in the same graphic : one coming from the user data and one from static data as following :
I wanted to define the pointPadding value, but this is available for all the series. How can I set this value only for a specific serie ?
The simplest solution seems to be adding a second x-axis and separate series. For example:
series: [{
...,
groupPadding: 0.325,
id: 'id1'
}, {
...,
groupPadding: 0.325,
id: 'id2'
}, {
...,
xAxis: 1,
linkedTo: 'id1'
}, {
...,
xAxis: 1,
linkedTo: 'id2'
}],
xAxis: [{
width: '20%',
type: 'category',
tickWidth: 1
}, {
offset: 0,
width: '80%',
left: '20%',
type: 'category',
tickWidth: 1
}]
Live demo: http://jsfiddle.net/BlackLabel/rwg6tL2v/
API Reference: https://api.highcharts.com/highcharts/xAxis
I have attached the screenshot to show the dash line in left side of the chart. It would be helpful if we can achieve the functionality and I tried to increase the width of the border, it is visible slightly. Do you have any proper approach to achieve this?
Code Snippet :
Highcharts.chart('container', {
chart: {
type: 'bar',
charWidth: 520,
chartHeight:300,
margin: [70,0,0,0]
},
xAxis: {
categories: ['Jan'],
visible: false
},
yAxis: {
min: 0,
visible: false
},
plotOptions: {
series:{
stacking:'normal'
},
dataLabels: {
enabled : false,
}
},
series: [{
name: 'John',
data: [{
y: 15
}]
}, {
name: 'Jane',
data: [{
y: 22
}]
}, {
name: 'Joe',
data: [{
y: 33,
}]
}, {
stacking: false,
data: [55],
grouping: false,
dashStyle:'ShortDash',
color: 'transparent',
borderWidth: 2,
borderColor: 'red',
}]
});
Thanks for the response
[![enter image description here][2]][2]
The left side of the bar is connected to the xAxis, which makes the left border less visible. There are some possible solutions to this issue.
You can set the minimum value of the xAxis to -0.1 and set startOnTick property to false. Then the left border is visible (it's not directly connected to the axis).
Demo:
https://jsfiddle.net/BlackLabel/pqy84hvs/
API references:
https://api.highcharts.com/highcharts/xAxis.startOnTick
https://api.highcharts.com/highcharts/xAxis.min
yAxis: {
min: -0.1,
visible: false,
startOnTick: false
}
You can set the borderWidth property to 3. Then the border is visible.
Demo:
https://jsfiddle.net/BlackLabel/01m6p47f/
API references:
https://api.highcharts.com/highcharts/series.bar.borderWidth
{
name: 'Joe',
borderWidth: 3,
borderColor: 'red',
data: [{
y: 33,
}]
}
You can also use SVG Renderer and render the border yourself.
Docs:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
Example demo of using SVG Renderer:
https://jsfiddle.net/BlackLabel/2koczuq0/
I am working on a project and I would like to use bar chart(HighChart) to indicate values. I prefer to use bar chart of this kind-
bar chart image
If any one have worked on this type of bar chart or have any idea of how to implement it, please share. Thanks in advance.
Set axis min max and then create an additional series which will complete the first series data to the axis max. For the additional, dummy series set options like enableMouseTracking or showInLegend to false so it wont inteact with the user.
yAxis: {
min: 0,
max: 700
},
plotOptions: {
series: {
grouping: false,
borderWidth: 0
}
},
series: [{
enableMouseTracking: false,
linkedTo: 1,
data: [{
y: 700,
color: 'rgba(66, 134, 244, 0.5)'
}, {
y: 700,
color: 'rgba(206, 49, 28, 0.5)'
}]
}, {
dataLabels: {
enabled: true,
style: {
fontSize: '20px',
textOutline: null
}
},
data: [{
y: 107,
color: 'rgba(66, 134, 244, 1)'
}, {
y: 31,
color: 'rgba(206, 49, 28, 1)'
}]
}]
example: http://jsfiddle.net/sL5bpep3/
As the title states, highcharts is only loading the title and subtitle, yet none of the subsequent chart information or it's relevant theme. Hitting my head against a wall trying to get this to work. Really hoping someone else here has had this problem.
jsfidizzle
The first half of the fiddle is the highcharts theme. All the logic starts kicking off at #transitfunding
Very simple fix... you need to move your series data outside of your plotOptions: like so:
plotOptions: {
column: {
stacking: 'normal'
},
},
series: [{
name: 'Other',
data: [0, 0, -5400000, 1, 1, 0, 3, 0, 8016805, -8435419, -28900000]
}, {
name: 'Gas Tax',
data: [119221, 627705, 234646, 6685080, 1341871, 1990937, 3187208, 6911715, 10002605, -14282137, -10555715 ]
}]
A working fiddle can be seen here.
you have misplace the series section.
series(that contains data) is the sibling of plotOptions not its child.
so it should be like
plotOptions: {
column: {
stacking: 'normal'
},
},
series: [{
name: 'Other',
data: [0, 0, -5400000, 1, 1, 0, 3, 0, 8016805, -8435419, -28900000]
}, {
name: 'Gas Tax',
data: [119221, 627705, 234646, 6685080, 1341871, 1990937, 3187208, 6911715, 10002605, -14282137, -10555715 ]
}]
I've updated your js fiddle here