Related
Using apexchart
const data = [45, 52, 78, 45, 69, 23, 30, 45, 52, 88]
const dataXCategories = ["10.12", "11.12", "12.12", "13.12", "14.12", "15.12", "16.12", "17.12", "18.12", "19.12"]
new ApexCharts(chart, {
chart: {
height: 165,
type: "area",
toolbar: {
show: false
}
},
stroke: {
show: true,
curve: 'smooth',
lineCap: 'butt',
colors: undefined,
width: 2,
dashArray: 0,
},
colors: ["#00f"],
dataLabels: {
enabled: false
},
series: [{
name: "Series 1",
data: data
}],
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: .7,
opacityTo: .9,
stops: [0, 90, 100]
}
},
xaxis: {
categories: dataXCategories,
labels: {
show: true,
format: 'dd/MM',
style: {
fontSize: "11px",
fontWeight: 400,
fontFamily: "Inter",
colors: ["#999", "#999", "#999", "#999", "#999", "#999", "#999", "#999", "#999", "#999"],
}
},
crosshairs: {
show: true,
opacity: 1,
position: 'front',
stroke: {
color: '#4A3AFF',
width: 2,
dashArray: 0
}
}
},
yaxis: {
min: 0,
max: 100,
tickAmount: 4,
labels: {
show: true,
offsetX: -12,
style: {
fontSize: "11px",
fontWeight: 400,
fontFamily: "Inter",
colors: ["#999"],
},
formatter: function(value) {
return `${value}%`;
}
},
},
grid: {
show: true,
borderColor: '#EDEDED',
strokeDashArray: 0,
position: 'back',
xaxis: {
lines: {
show: true
}
},
yaxis: {
lines: {
show: true
}
},
row: {
colors: undefined,
opacity: .5
},
column: {
colors: undefined,
opacity: .5
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
},
markers: {
colors: '#4A3AFF',
hover: {
size: undefined,
sizeOffset: 7
}
}
}).render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart" class="apex-charts" dir="ltr"></div>
Now the blue line is equal to the height of the graph
Please tell me how to make the line start from the marker to the bottom line x
I will be glad for any help
I do not think you can do this with simple configuration. However, since ApexCharts is based on SVG, you can manipulate the DOM yourself quite easily.
As I said previously in other answers, because I have already used this technique several times, what I am going to show you is more experimental than official.
It works, though.
In your case, the idea is to put some code in the mouseMove event callback. The use of a MutationObserver is recommended to watch for changes in the DOM. When a marker (which is a circle) is hovered, its r, cx and cy attributes are updated. In particular, cy is the most interesting because it gives us the vertical position of the active marker. r is also useful to adjust the offset of crosshairs.
Here is the main part of the code:
chart: {
// ...
events: {
mouseMove: () => {
let crosshairs = document.querySelector('.apexcharts-xcrosshairs'),
marker = document.querySelector('.apexcharts-marker');
let settings = { attributes: true },
observer = new MutationObserver(() => {
crosshairs.setAttribute('y1', `${marker.cy.baseVal.value + marker.r.baseVal.value + 1}`);
});
observer.observe(marker, settings);
}
}
},
Here is the full code:
const data = [45, 52, 78, 45, 69, 23, 30, 45, 52, 88];
const dataXCategories = ["10.12", "11.12", "12.12", "13.12", "14.12", "15.12", "16.12", "17.12", "18.12", "19.12"];
new ApexCharts(chart, {
chart: {
height: 165,
type: 'area',
toolbar: {
show: false
},
events: {
mouseMove: () => {
let crosshairs = document.querySelector('.apexcharts-xcrosshairs'),
marker = document.querySelector('.apexcharts-marker');
let settings = { attributes: true },
observer = new MutationObserver(() => {
crosshairs.setAttribute('y1', `${marker.cy.baseVal.value + marker.r.baseVal.value + 1}`);
});
observer.observe(marker, settings);
}
}
},
stroke: {
show: true,
curve: 'smooth',
lineCap: 'butt',
colors: undefined,
width: 2,
dashArray: 0,
},
colors: ['#00f'],
dataLabels: {
enabled: false
},
series: [{
name: 'Series 1',
data: data
}],
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
opacityFrom: .7,
opacityTo: .9,
stops: [0, 90, 100]
}
},
xaxis: {
categories: dataXCategories,
labels: {
show: true,
format: 'dd/MM',
style: {
fontSize: '11px',
fontWeight: 400,
fontFamily: 'Inter',
colors: ['#999', '#999', '#999', '#999', '#999', '#999', '#999', '#999', '#999', '#999']
}
},
crosshairs: {
show: true,
opacity: 1,
position: 'front',
stroke: {
color: '#4A3AFF',
width: 2,
dashArray: 0
}
}
},
yaxis: {
min: 0,
max: 100,
tickAmount: 4,
labels: {
show: true,
offsetX: -12,
style: {
fontSize: '11px',
fontWeight: 400,
fontFamily: 'Inter',
colors: ['#999']
},
formatter: value => `${value}%`
},
},
grid: {
show: true,
borderColor: '#EDEDED',
strokeDashArray: 0,
position: 'back',
xaxis: {
lines: {
show: true
}
},
yaxis: {
lines: {
show: true
}
},
row: {
colors: undefined,
opacity: .5
},
column: {
colors: undefined,
opacity: .5
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
},
markers: {
colors: '#4A3AFF',
hover: {
size: undefined,
sizeOffset: 7
}
}
}).render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart" class="apex-charts" dir="ltr"></div>
I would like to center align the total (value 20/40) but without the label and also change the color. Unfortunately, only label can accept color but still it cant be vertically center aligned.
var options = {
series: [20,40],
plotOptions: {
pie: {
donut: {
labels: {
show: true,
total: {
show: true,
showAlways: true,
label: '',
formatter: function (w) {
return w.globals.seriesTotals.reduce((a, b) => {
return `${a}/${b}`
})
}
}
}
}
}
},
colors: ['#0065bd', '#dbecf8'],
chart: {
type: 'donut',
},
dataLabels: {
enabled: false,
},
legend: {
show: false,
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
}
}
}]
}
var chart = new ApexCharts(
document.querySelector("#responsive-chart"),
options
);
chart.render();
#import url('https://fonts.googleapis.com/css?family=Poppins');
* {
font-family: 'Poppins', sans-serif;
}
#chart {
max-width: 260px;
margin: 35px auto;
opacity: 0.9;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.35.3/apexcharts.min.js" integrity="sha512-yhdujT21BI/kqk9gcupTh4jMwqLhb+gc6Ytgs4cL0BJjXW+Jo9QyllqLbuluI0cBHqV4XsR7US3lemEGjogQ0w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="chart">
<div id="responsive-chart"></div>
</div>
You can center value by change offsetY in plotOptions. You can also change color there. https://apexcharts.com/docs/options/plotoptions/pie/#value
plotOptions: {
pie: {
donut: {
labels: {
show: true,
total: {...},
value:{
offsetY: -8, // -8 worked for me
color:'#ff00ff'
}
}
}
}
},
Thought I would answer my question how I managed to achieve this finally.
To apply font colour - Instead of
total: formatter function(w) {
}
I used label: property.
To position the text to center, I had to dig through the Apex charts code and found this code which is using name.OffsetY to position.
https://github.com/apexcharts/apexcharts.js/blob/main/src/charts/Pie.js
if (dataLabelsConfig.name.show) {
let elLabel = graphics.drawText({
x,
y: y + parseFloat(dataLabelsConfig.name.offsetY),
text: name,
textAnchor: 'middle',
foreColor: labelColor,
fontSize: labelFontSize,
fontWeight: labelFontWeight,
fontFamily: labelFontFamily
})
This is how my plotoptions looks like
plotOptions: {
pie: {
donut: {
labels: {
show: true,
name: {
offsetY: 10,
},
total: {
show: true,
showAlways: true,
fontSize: '22px',
fontFamily: 'Helvetica, Arial, sans-serif',
fontWeight: 600,
label: `${data[0]}/${data[1]}`,
color: '#0065bd',
formatter: function (w) {
return '';
}
}
}
}
}
},
Is it possible to render charts and animate them step by step?
Right now I got three area-datasets in my chart which I need to animate step by step. Dataset/area 1 shall start and after this is finished, Dataset/area 2 need to start and then 3.
I cannot find an option for that, is this even possible with Highcharts?
Right now the Animation goes from left,bottom to right,up - is there an option for an animation direction? I want to start the animation from the full width (fully expanded on the xAxis) to go upwarts the yAxis.
My Options:
var $chart = $('#chart');
var chart = new Highcharts.Chart({
chart: {
renderTo: $chart[0],
type: 'area',
style: {
fontFamily: 'Arial, sans-serif'
}
},
legend: {
layout: 'vertical',
align: 'center',
verticalAlign: 'bottom',
itemMarginBottom: 15,
borderWidth: 0,
itemStyle: {
color: '#9a9a9a',
fontWeight: '300',
fontSize: '16px',
useHTML: true,
}
},
title: false,
xAxis: {
categories: ['0', '5', '10', '15', '20', '25', '30'],
lineColor: '#9a9a9a',
minTickInterval: 5,
title: {
text: 'Years',
style: {
color: '#000',
fontSize: '14px',
fontWeight: 'bold'
}
},
labels: {
style: {
color: '#9a9a9a',
fontSize: '14px'
}
}
},
yAxis: {
min: 0,
tickAmount:5,
minorTickInterval: 0,
minorGridLineColor: '#9a9a9a',
gridLineWidth: 1,
maxPadding: 0.1,
title: {
text: 'Eur',
style: {
color: '#000',
fontSize: '14px',
fontWeight: 'bold'
}
},
labels: {
format: '{value:,.0f}',
style: {
color: '#9a9a9a',
fontSize: '14px'
}
}
},
tooltip: {
backgroundColor: '#FCFFC5'
},
plotOptions: {
series: {
borderWidth: 0,
pointPadding: 0.2,
groupPadding: 0,
style: {
color: '#000',
fontSize: '16px',
fontWeight: '300'
}
}
},
series: [
{
name: '2',
legendIndex: 2,
color: '#83bd3f',
animation: {
duration: 3000
},
data: [1042,
2128,
3259,
4438,
5666,
6946,
7652
]
},
{
name: '1',
legendIndex: 1,
color: '#24356d',
animation: {
duration: 2000
},
data: [1024,2073,3146,
4246,
5372,
6525,
7705
]
},
{
name: 'Eingezahlte Rate',
legendIndex: 0,
color: '#9a9a9a',
animation: {
duration: 1000
},
data: [
1000,
2000,
3000,
4000,
5000,
6000,
7000
]
}
]
});`
Thanks
You can use series.afterAnimate event in which you can fire animation for another series.
In your first series set afterAnimate like this:
events: {
afterAnimate: function () {
this.chart.get('1').update({
visible: true,
animation: {
duration: 2000
},
events: {
afterAnimate: function () {
this.chart.get('2').update({
visible: true,
animation: {
duration: 3000
}
})
}
}
})
}
},
For the other series, initially you can disable animation or/and set their visibility to false:
series: [{
name: '2',
id: '2',
legendIndex: 2,
color: '#83bd3f',
animation: {
duration: 0
},
visible: false,
To change the direction of the animation you need to wrap series.animate
method and change how the clipping rect is animated.
(function(H) {
H.wrap(H.seriesTypes.area.prototype, 'animate', function(proceed, init) {
var series = this,
chart = series.chart,
clipRect,
animation = H.animObject(series.options.animation),
sharedClipKey,
newH;
if (init) {
return proceed.apply(this, Array.prototype.slice.call(arguments, 1));
} else {
sharedClipKey = this.sharedClipKey;
clipRect = chart[sharedClipKey];
if (clipRect) {
clipRect.attr({
y: chart.plotSizeY,
height: 0,
width: chart.plotSizeX
}).animate({
y: 0,
height: chart.plotSizeY
}, animation);
}
if (chart[sharedClipKey + 'm']) {
chart[sharedClipKey + 'm'].attr({
y: chart.plotSizeY,
height: 0,
width: chart.plotSizeX + 99
}).animate({
y: 0,
height: chart.plotSizeY
}, animation);
}
// Delete this function to allow it only once
series.animate = null;
}
});
})(Highcharts)
example: http://jsfiddle.net/0esjvmgL/
I have a Highcharts column chart and I am trying to reduce the distance between each column on the X axis whilst pulling them towards the center so that the columns appear more grouped.
So for example in my example above, the red and the blue column would be much closer together and positioned towards the center.
Below is my chart configuration. The seriesData parameter is just a custom object I pass in at render.
chartConfig.js
function chartConfig(seriesData) {
return {
barColor: seriesData.color,
data: seriesData,
credits: { enabled: false },
chart: {
width: seriesData.width,
defaultSeriesType: 'column',
backgroundColor: '#EAEFF6'
},
tooltip: { enabled: false },
colorAxis: {
dataClassColor: 'category'
},
colors: [],
legend: {},
title: {
useHTML: true,
text: (seriesData.name === 'n/a' || seriesData.name === 'N/A') ? '_' : seriesData.name,
style: {
color: (seriesData.name === 'n/a' || seriesData.name === 'N/A') ? '#E9EFF4' : '#666666',
fontSize: '14px',
fontFamily: 'Roboto',
fontWeight: 'bold',
paddingTop: '10px',
lineHeight: '1em'
},
align: 'center',
x: 0,
y: 2
},
plotOptions: {
column: {
stacking: 'normal',
animation: true,
borderColor: 'grey',
borderWidth: 0
},
series: {
borderRadius: 15,
dataLabels: {
enabled: false
},
states: {
hover: {
enabled: false
}
}
}
},
yAxis: [{
max: Math.max.apply(null, seriesData.scaleValues),
min: Math.min.apply(null, seriesData.scaleValues),
title: false,
minorGridLineColor: '#FFF',
gridLineColor: '#8E8E8E',
minPadding: 0,
tickPositions: (seriesData.scalePercentageValues || null),
labels: {
formatter: function () {
if (seriesData.usePercentage) {
return `${this.value} %`;
}
return this.value;
}
}
}],
xAxis: {
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
categories: seriesData.elements.map((x) => { return x.name; }),
labels: {
style: {
color: '#666666',
fontSize: '12px',
fontFamily: 'Roboto'
}
}
},
series: [{
dataLabels: {
style: {
fontSize: '12px',
fontWeight: 'normal',
textShadow: 'none',
color: 'black',
fontFamily: 'Roboto',
backgroundColor: 'blue'
},
enabled: true,
formatter: function () {
if (seriesData.usePercentage) {
return `${this.y}%`;
}
return this.y;
}
},
showInLegend: false,
name: 'Fill Series',
color: '#F2F6F9',
pointWidth: 28,
animation: true,
data: seriesData.elements.map((x) => {
return { name: x.name, y: x.value, color: x.color };
}),
borderRadiusTopLeft: 10,
borderRadiusTopRight: 10,
borderColor: '#C0C0C0',
borderWidth: '1'
}]
};
}
module.exports = chartConfig;
The only solution I have tried so far is to use pointPadding and groupPadding. However this does not seem to have the desired effect.
I am trying to create a donut chart but the problem is its overlapping with legends which is causing an issue. i want it to move a bit upward .
Javascript :
$('#divCustomerServicePieChart').highcharts({
chart: {
type: 'pie'
},
//colors: [
// '#4572A7',
// '#AA4643'],
tooltip: {
valueSuffix: '',
enabled : false
},
title: {
text: '',// retJson.Title,
margin : 0
},
legend: {
layout: 'vertical',
verticalAlign: 'bottom',
align: 'left',
floating: true,
enabled: true,
labelFormatter: function () {
return this.name;
}
},
plotOptions: {
pie: {
borderColor: '#ffffff',
borderWidth: '4px',
innerSize: '60%',
size: '100%',
dataLabels: {
enabled: true, distance: -20, color: 'white',
formatter: function () {
return this.point.y;
}
}
// ,columns: { colorByPoint: true }
}
},
series: retJson.d.Series,
},
function (chart) { // on complete
var xpos = '50%';
var ypos = '30%';
var circleradius = 55;
// Render the circle
chart.renderer.circle(xpos, ypos, circleradius).attr({
fill: 'red',
}).add();
// Render the text
chart.renderer.text('<span style="color: white;font-weight:bold;">' + retJson.d.CenterText + '</span>', 80, 150).css({
width: circleradius * 2,
fontSize: '25px',
textAlign: 'center'
}).attr({
zIndex: 999
}).add();
chart.attr({ transform: "translate(200,40)" });
});
Set center, for example:
plotOptions: {
pie: {
borderColor: '#ffffff',
borderWidth: '4px',
innerSize: '60%',
size: '100%',
center: ['50%', '30%'], // set center
dataLabels: {
enabled: true, distance: -20, color: 'white',
formatter: function () {
return this.point.y;
}
}
// ,columns: { colorByPoint: true }
}
},