With help of my previous question, I'm able to set equal heights for all the sections to the funnel. How can I add some extra texts to the edges(right) of every section. I did not find any documentation for this. My expected funnel chart as follows:
Highcharts.chart('container', {
chart: {
type: 'funnel'
},
title: {
text: 'Sales funnel'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> ({point.y:,.0f})',
softConnector: true,
inside: true,
},
neckHeight: "0%",
neckWidth: "80%",
width: '15%',
reversed: true,
}
},
legend: {
enabled: false
},
series: [{
name: 'Unique users',
data: [
['Website visits', 15654],
['Downloads', 4064],
['Requested price list', 1987],
['Invoice sent', 976],
['Finalized', 846]
]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
plotOptions: {
series: {
dataLabels: {
inside: true
},
center: ['50%', '50%'],
width: '100%'
}
}
}
}]
}
});
jsfiddle Example: https://jsfiddle.net/kiranuk/xhfbyj64/
Thanks for the help.
For adding extra text on the chart use Highcharts. SVGRenderer
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
Sample code:
chart: {
type: 'funnel',
events: {
render: function() {
let chart = this,
point1 = chart.series[0].points[4],
x = point1.dlBox.x + point1.dlBox.bottomWidth + chart.plotLeft + 1,
y = point1.dlBox.y + chart.plotTop - point1.dlBox.height;
if (!chart.myCustomText) {
chart.myCustomText = chart.renderer
.text('1% <br> Did')
.css({
fontSize: '10px',
zIndex: '3px'
})
.add();
}
//pdate text coordinates
chart.myCustomText.attr({
x: x,
y: y
})
}
}
},
Demo:
https://jsfiddle.net/BlackLabel/kLyt6ngs/
Related
Getting the mentioned error when i try to render a apexchart chart from a json api
also the chart is not rendered in its div
console error
json api link
https://syed1ahmed.github.io/stage-gear/api.json
apex chart chart configs
var ChartOptions = {
series: [],
noData: {
text: 'Loading...'
},
chart: {
type: 'bar',
height: 300,
},
colors: 'blue',
plotOptions: {
bar: {
horizontal: !1,
dataLabels: {
position: 'top',
},
}
},
dataLabels: {
enabled: !1,
offsetX: -6,
style: {
fontSize: '12px',
colors: ['#fff']
}
},
stroke: {
show: true,
width: 1,
colors: ['#fff']
},
tooltip: {
shared: true,
intersect: false
},
yaxis: {
forceNiceScale: true,
labels: {
show: false,
}
},
grid: {
show: true,
borderColor: '#90A4AE',
strokeDashArray: 0.5,
position: 'back',
xaxis: {
lines: {
show: false
}
},
row: {
colors: 'red',
opacity: 0.2
},
},
xaxis: {
type : 'catagory',
labels: {
show: false,
rotate: 180,
}
}
};
var chart = new ApexCharts(document.querySelector("#chart"), ChartOptions);
chart.render();
const url = 'https://syed1ahmed.github.io/stage-gear/api.json';
$.getJSON(url, function (response) {
chart.updateSeries([{
name: 'monthly Volume In USD',
data: response
}])
});
code pen reproducing the problem faced
https://codepen.io/syed1ahmed/pen/eYrmzPO
can someone please solve this bug
Thanks
You can't just throw whole response to data, it has to be in a form apexcharts can understand. When you map data to array like this, chart will renders.
chart.updateSeries([{
name: 'monthly Volume In USD',
data: response.data.map((val) => val.volume)
}])
And if you want dates as categories updateOptions like this
chart.updateOptions({
series: [
{
name: "monthly Volume In USD",
data: response.data.map((val) => val.volume)
}
],
xaxis: {
categories: response.data.map((val) => val.date)
}
});
I am working on my project with Django where I need to use Javascript and a chart library. I have two charts that I made with ApexCharts, but I don't know how to prevent the label text to being slant and overflow. I can't find anything about this problem in the documentation or I'm not enough familiar to find what I need. :)
var options07 = {
series: [{
name: 'SOHA',
data: [ {{i.szervkult07a}} ]
}, {
name: 'RITKÁN',
data: [ {{i.szervkult07b}} ]
}, {
name: 'IDŐNKÉNT',
data: [ {{i.szervkult07c}} ]
}, {
name: 'GYAKRAN',
data: [ {{i.szervkult07d}} ]
}, {
name: 'MINDIG',
data: [ {{i.szervkult07e}} ]
}],
chart: {
type: 'bar',
height: 350,
stacked: true,
stackType: '100%'
},
responsive: [{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: -10,
offsetY: 0
}
}
}],
xaxis: {
categories: ['A cég gondot fordít az ügyfelek igényeinek minél jobb megismerésére'
],
},
fill: {
opacity: 1
},
legend: {
position: 'right',
offsetX: 0,
offsetY: 50
},
};
var chart = new ApexCharts(document.querySelector("#chart_szk07"), options07);
chart.render();
var options07b = {
series: [{
name: 'SOHA',
data: [{{i.szervkult07a}}]
}, {
name: 'RITKÁN',
data: [{{i.szervkult07b}}]
}, {
name: 'IDŐNKÉNT',
data: [{{i.szervkult07c}}]
}, {
name: 'GYAKRAN',
data: [{{i.szervkult07d}}]
}, {
name: 'MINDIG',
data: [{{i.szervkult07e}}]
}],
chart: {
type: 'bar',
height: 350
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded'
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['A cég gondot fordít az ügyfelek igényeinek minél jobb megismerésére'],
},
yaxis: {
title: {
text: 'fő'
}
},
fill: {
opacity: 1
},
tooltip: {
y: {
formatter: function (val) {
return val + " fő"
}
}
}
};
var chart = new ApexCharts(document.querySelector("#chart_szk07b"), options07b);
chart.render();
From the docs, You should be able to add rotate: 0 to the labels section of xaxis. I suggest trying to shorten those. I imagine a long label will not look as good as a shorter one.
xaxis: {
categories: ['A cég gondot fordít az ügyfelek igényeinek minél jobb megismerésére'],
labels: {
rotate: 0
}
}
I have one Highchart which is showing a Standard Deviation curve (Bell curve). I would like to plot a x axis vertical line when x=0.(see my current graph).
When I include the code to include the line the chart disappear, so I believe something I need to change, obviously :-).
Just as information the chart works perfectly without the "plotLines:" inside xAxis.
Could you help me with this?
See my Script
<script>
var data = <?php echo json_encode($data, JSON_NUMERIC_CHECK); ?>;
var pointsInInterval = 5;
Highcharts.chart('container', {
chart: {
margin: [50, 0, 50, 50],
events: {
load: function () {
Highcharts.each(this.series[0].data, function (point, i) {
var labels = ['4σ', '3σ', '2σ', 'σ', 'μ', 'σ', '2σ', '3σ', '4σ'];
if (i % pointsInInterval === 0) {
point.update({
color: 'red',
dataLabels: {
enabled: true,
format: labels[Math.floor(i / pointsInInterval)],
overflow: 'none',
crop: false,
y: -2,
style: {
fontSize: '13px'
}
}
});
}
});
}
}
},
title: {
text: null
},
legend: {
enabled: false
},
xAxis: [{
title: {
text: 'Data'
},
visible: false
}, {
title: {
text: 'Bell curve'
},
opposite: false,
visible: true
},
plotLines: [{
color: '#FF0000',
width: 2,
value: 0
}]
],
yAxis: [{
title: {
text: 'Data'
},
visible: false
}, {
title: {
text: 'Bell curve'
},
opposite: false,
visible: true
}],
series: [{
name: 'Bell curve asd',
type: 'bellcurve',
xAxis: 1,
yAxis: 1,
pointsInInterval: pointsInInterval,
intervals: 4,
baseSeries: 1,
zIndex: -1,
marker: {
enabled: true
}
}, {
name: 'Data',
type: 'scatter',
data: data,
visible: false,
marker: {
radius: 1.5
}
}],
exporting: {
allowHTML: true,
sourceWidth: 800,
sourceHeight: 600
}
});
</script>
Plot lines should be added as a property of an axis object:
xAxis: [{
title: {
text: 'Data'
},
visible: false
}, {
title: {
text: 'Bell curve'
},
opposite: false,
visible: true,
plotLines: [{
color: '#FF0000',
width: 2,
value: 0
}]
}
]
Live demo: http://jsfiddle.net/BlackLabel/4xcno5v9/
API Reference: https://api.highcharts.com/highcharts/xAxis.plotLines
I am using HighCharts in particular a Funnel.
At the moment the value labels are appearing on the right of the funnel but I need them inside the funnel, centered.
Here is a link to a JS Fiddle: Example Here
And here is the code too:
$(function () {
$('#container').highcharts({
chart: {
type: 'funnel',
marginRight: 100
},
title: {
text: 'Sales funnel',
x: -50
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> ({point.y:,.0f})',
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
softConnector: true
},
neckWidth: '30%',
neckHeight: '25%'
//-- Other available options
// height: pixels or percent
// width: pixels or percent
}
},
legend: {
enabled: false
},
series: [{
name: 'Unique users',
data: [
['Website visits', 15654],
['Downloads', 4064],
['Requested price list', 1987],
['Invoice sent', 976],
['Finalized', 846]
]
}]
});
});
How can I get those labels centered inside the funnel?
I think that you can manually set the position of your dataLabels using attr()on load and redraw chart events:
http://api.highcharts.com/highcharts/Element.attr
events: {
load: function() {
var chart = this;
Highcharts.each(chart.series[0].data, function(p, i) {
p.dataLabel.attr({
x: (chart.plotWidth - chart.plotLeft) / 2,
'text-anchor': 'middle'
})
})
},
redraw: function() {
var chart = this;
Highcharts.each(chart.series[0].data, function(p, i) {
p.dataLabel.attr({
x: (chart.plotWidth - chart.plotLeft) / 2,
'text-anchor': 'middle'
})
})
}
}
Here you can find an example how it can work:
http://jsfiddle.net/bp03q6da/
Kindly take a look at following fiddle in which i tried to remove the categories but on removing categories its placing numbers instead of it by default and also showing those numbers in tooltip.
All I am trying to do is that categories or numbers doesnot display on chart or on tooltip and only stackedbar appears on the chart , So kindly let me know how can i do it .Thanks,
http://jsfiddle.net/EJFsH/3/
$(function () {
var data = [ {
name: 'Year 2008',
data: [0, 914, 4054, 732, 34]
}];
data = $.grep(data, function (category) {
return $.grep(category.data, function (item) {
return item > 0;
}).length > 0;
});
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: data
});
});
I'm not 100% sure of what you are asking for. But, to turn off the XAxis or yAxis labels, juse labels : {enabled:false} and to change the tooltips use tooltip:{formatter: function() {...}}
see this fiddle:
http://jsfiddle.net/6ypq4/
xAxis: {
title: {
text: null
},
labels : {
enabled: false
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify',
enabled: false
}
},
tooltip: {
formatter: function() {
return this.y + ' millions';
}
},