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>
The plotline should spread across the graph but the plot band should of smaller width.
1) Initially without width being set.
2) When y axis width is set to 20
3) I want something like this where both the plot band and the plotline co exists
this is the fiddle code link to what I have tried so far.
Can someone please help me out thank you very much in advance.
https://jsfiddle.net/mncfy80p/
chart: {
type: "column",
height: 205,
plotBackgroundColor: "#D3D3D3",
width:250,
},
title : {
text:''
},
credits: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
inside: true
},
pointPadding: 0
}
},
xAxis: {
visible:false,
},
yAxis: {
title: {
text: ''
},
min : 0,
max : 100,
tickInterval : 10,
gridLineWidth: 0,
plotLines: [{
value: 70,
color: 'black',
dashStyle: "Solid",
width: 4,
zIndex: 5,
label: {
text: 39,
align: "right",
x: 2,
y: -5,
style: {
color: 'black',
fontWeight: "bold",
fontSize: "18px",
}
}
}],
plotBands: [
{
color: 'rgb(204,0,0)',
from: 0,
to: 30.99,
zIndex: 3,
},
{
color: 'rgb(226,113,113)',
from: 31,
to: 44.99,
zIndex: 3,
},
{
color: 'rgb(247,209,34)',
from: 45,
to: 54.99,
zIndex: 3,
},
{
color: 'rgb(136,207,136)',
from: 55,
to: 68.99,
zIndex: 3,
},
{
color: 'rgb(68,180,68)',
from: 69,
to: 87.99,
zIndex: 3,
},
{
color: 'rgb(0,153,0)',
from: 88,
to: 100,
zIndex: 3,
}
],
},
series: [{
dataLabels: {
color: "white",
verticalAlign: "bottom",
crop: false,
style: {
fontWeight: "Normal"
}
},
data: [{
y: 85,
color:'red',
dataLabels: {
formatter(){
return '<span style="font-size:11px;">A</span>';
},
y:-20
}
}, {
y: 72,
color:'green',
dataLabels:{
formatter(){
return '<span style="font-size:11px;">B</span>';
},
y:-15
}
}, {
y: 83,
color:'blue',
dataLabels:{
formatter(){
return '<span style="font-size:11px;">C</span>';
},
y:-15
}
}],
showInLegend: false
}]
});
The simplest solution is to create another y-axis and move plot bands to it:
yAxis: [{
...,
plotLines: [...],
}, {
...,
plotBands: [...]
}]
Live demo: https://jsfiddle.net/BlackLabel/agq6ebjd/
API Reference: https://api.highcharts.com/highcharts/yAxis
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've tried various ways of updating treemap color axis legend font size and font family
var options = {
colorAxis: {
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0],
labels: {
style: {
fontSize: '10px',
fontFamily: 'Arial'
}
}
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: [{
name: 'A', value: 6,colorValue: 1 }, { name: 'B',value: 6,colorValue: 2 }, {
name: 'C',value: 4,colorValue: 3}, {name: 'D',value: 3,colorValue: 4 }, {
name: 'E',value: 2,colorValue: 5 }, {name: 'F',value: 2, colorValue: 6}, {
name: 'G',value: 1,colorValue: 7}] }],
title: {
text: 'Highcharts Treemap'
}
};
var chart = Highcharts.chart('container', options);
$('#update').click(function () {
chart.update({
chart:{
style: {
fontSize: '20px',
fontFamily: 'HelveticaNeue'
}
},
legend: {
itemStyle: {
fontSize: '20px',
fontFamily: 'HelveticaNeue'
}
},
colorAxis: {
labels: {
style: {
fontSize: '20px',
fontFamily: 'HelveticaNeue'
}
}}
});
chart.legend.update({
itemStyle: {
fontSize: '20px',
fontFamily: 'HelveticaNeue'
}
})
});
Please see here - http://jsfiddle.net/hsuh/t04qe2xx/8/
Style doesn't seem to be updated. Please help. Thanks
Your click event is not fired because of the difference in id.
Remove hash from button's id: <button id='update'> Update </button>
Then you can update axis via axis.update()
$('#update').click(function() {
chart.colorAxis[0].update({
labels: {
style: {
fontSize: '20px'
}
}
})
});
example: http://jsfiddle.net/t04qe2xx/9/
I am trying to create a gauge using Highcharts.
In the gauge I want to render the text at the tip of the needle and the position of text should change when the needle tip position changes. I have already added the some text at the start positon and end position of gauge, I need to add third text according to needle tip.
Can you please have a look and let me know how I do it?
My jsfiddle link is http://jsfiddle.net/anchika/nszqbsgx/1/
var chart = new Highcharts.Chart({
chart: {
type: 'gauge',
renderTo: container,
marginTop: -60,
marginRight: 0,
spacingLeft: 0,
spacingBottom: 0,
backgroundColor: null,
},
pane: {
center: ['50%', '57%'],
size: '75%',
startAngle: -150,
endAngle: 150,
background: [{
borderColor: '#000',
}],
},
tooltip: {
enabled: false
},
title: {
text: null,
},
yAxis: {
min: 0,
max: 100,
title: {
y: -20,
useHTML: true,
text: 'graphTitle',
style: {
fontFamily: 'Raleway',
fontSize: '2em',
textAlign: 'center',
}
},
labels: {
enabled: false,
},
tickInterval: 16.66,
tickWidth: 5,
tickPosition: 'outside',
tickLength: 10,
tickColor: '#000',
minorTickColor: '#000',
lineColor: null,
plotBands: [{
from: 0,
to: 33,
color: '#00A600', // green
outerRadius: '100%',
thickness: '15%'
}]
},
plotOptions: {
gauge: {
innerRadius: '90%',
dial: {
backgroundColor: 'rgba(0,0,0,0.4)',
}
}
},
credits: {
enabled: false
},
series: [{
data: [33],
dataLabels: {
useHTML: true,
//format: gaugeFormat, //Modify here to change the radial center values
borderWidth: 0,
style:{
fontFamily:'Raleway',
fontWeight: 'normal',
},
x: 5,
},
tooltip: {
enabled: false,
}
}]
},
function (chart) { // on complete
chart.renderer.text('End Time',500,370)
.css({
color: '#000',
fontSize: '16px'
})
.add();
chart.renderer.text('Start Time', 240, 370)
.css({
color: '#000',
fontSize: '16px'
})
.add();
});
Edit:
I want something like this link
I`m not sure that understand your question completely,
Please check this link
var chart = new Highcharts.Chart({
chart: {
type: 'gauge',
renderTo: container,
marginTop: -60,
marginRight: 0,
spacingLeft: 0,
spacingBottom: 0,
backgroundColor: null,
},
pane: {
center: ['50%', '57%'],
size: '60%',
startAngle: -150,
endAngle: 150,
background: [{
borderColor: '#000',
}],
},
tooltip: {
enabled: false
},
title: {
text: null,
},
yAxis: {
min: 0,
max: 100,
title: {
y: -20,
useHTML: true,
text: 'graphTitle',
style: {
fontFamily: 'Raleway',
fontSize: '2em',
textAlign: 'center',
}
},
labels: {
enabled: false,
},
tickInterval: 16.66,
tickWidth: 5,
tickPosition: 'outside',
tickLength: 10,
tickColor: '#000',
minorTickColor: '#000',
lineColor: null,
plotBands: [{
from: 0,
to: 33,
color: '#00A600', // green
outerRadius: '100%',
thickness: '15%'
}]
},
plotOptions: {
gauge: {
innerRadius: '90%',
dial: {
backgroundColor: 'rgba(0,0,0,0.4)',
}
}
},
credits: {
enabled: false
},
series: [{
data: [100],
dataLabels: {
useHTML: true,
//format: gaugeFormat, //Modify here to change the radial center values
borderWidth: 0,
style:{
fontFamily:'Raleway',
fontWeight: 'normal',
},
x: 5,
},
tooltip: {
enabled: false,
}
}]
},
function (chart) { // on complete
console.log(chart); chart.renderer.text(chart.series[0].data[0].y,140+chart.series[0].data[0].y*2,350)
.css({
color: '#000',
fontSize: '16px'
})
.add();
});