Develop Reference

ApexChart: Line chart another option

Hi I am using АpexChart but I have problem setting up xaxis. The picture below is from another chart, but I'm looking for the effect it has. Note the long straight line, this means there is no data for the specific period.
How do I set up a АpexChart so I can display similar data
var options = {
series: [{
name: "Level",
data: [30,45,50,60,70,91,125]
}],
chart: {
height: 350,
type: 'line',
zoom: {
enabled: true
}
},
dataLabels: {
enabled: true
},
stroke: {
curve: 'straight'
},
title: {
text: 'Battery',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
xaxis: {
categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

The chart we see on your screenshot has been made with Highcharts, right? I know that you can do something similar with amCharts or Chart.js. But this feature is not available in ApexCharts yet. With ApexCharts, you will get blanks (see demo) if you have null values in your data.
Take a look at this issue and this pull request on GitHub.
Comment of the library author (2019), from the issue:
This has been proposed, but not worked upon yet.
Comment of the library author (2021), from the PR:
Update: This PR doesn't solve the issue the way we wanted and doesn't cover multiple use-cases.
Please bear with us. There might be a new PR with a completely different implementation.

How to add inline legends to line / area mixed chart in highchart

I have a chart which has part line and part area stacked. In the first part (area) I want to add an inline legend as it is shown in this example (ie where it says Asia)
https://www.highcharts.com/demo/area-stacked-percent
These are the example options but I do not see how to specify that or if this is the default way to show legends in this plot
In my example, I cannot put the legends inside the area part. Tried to add title in yAxis. I also tried to add an annotation but it did not work:
https://jsfiddle.net/hkpna40r/1/
annotations: [{
labelOptions: {
backgroundColor: 'rgba(255,255,255,0.5)',
verticalAlign: 'top',
y: 4
},
labels: [{
point: {
xAxis: 0,
yAxis: 0,
x: Date.UTC(2019, 11, 2),
y: 3
},
zIndex:100,
text: 'Arbois'
}],
}],

You can achieve what you want by attaching a module called series-label and set plotOptions.area.label like that:
plotOptions: {
area: {
label: {
enabled: true,
onArea: false
}
},
line: {
label: {
enabled: false
}
}
}
Note, annotations also work but you have to attach annotations module separately.
Demo:
https://jsfiddle.net/BlackLabel/5utLhenb/
API reference:
https://api.highcharts.com/highcharts/plotOptions.area.label
https://www.highcharts.com/docs/advanced-chart-features/annotations-module

How to hide date time x-axis but still be able to show plot lines in Highcharts gantt chart?

I want to disable or hide marked x-axis on the following image:
But I still need to be able to show a plot line.
I tried to play around with "xAxis" Highcharts property and I am able to hide marked x-axis, but then I can not add a plot line. It seems to me this axis is somehow connected with the plot.
Thanks a lot for help.

The plotLines are connected to an axis, but you can separately disable the grid and the labels:
xAxis: [{
...,
grid: {
enabled: false
},
plotLines: [{
color: 'red',
value: today + day * 7,
width: 5
}],
labels: {
enabled: false
},
tickLength: 0
}, {
visible: false
}]
Live demo: https://jsfiddle.net/BlackLabel/c2xLruvp/
API Reference: https://api.highcharts.com/gantt/xAxis.visible

Is it possible to have different colored graphs in a single series in HighCharts?

I have a single series column graph with x-axis as datetime and y-axis as some constant value. I would like to show the columns in different colors based on some information I have , is this possible ?
e.g. I have dynamic data coming in to plot my graph,I use series.addPoint({x:x,y:value,extra:info}, false, false) to plot the same. Based on the info, how can I vary the colors?
I am pretty new to javascript and highcharts. So pardon my limited knowledge, any help in the right direction would be appreciated.
Updated code:
if(type=='a')
color='#7cb5ec';
else
if(type=='b')
color='#f45b5b';
else
if(type=='c')
color='#8085e9';
else
if(type=='d')
color='#2b908f';
else
color='#e4d354';
series.addPoint({x:x,y:value,extra:info,marker:{fillColor:color}}, false, false);
I have also set the colorByPoint: true option. The series.addPoint function runs in a loop which runs as and when I get my data.

Try out the following
plotOptions: {
column: {
colorByPoint: true
}
},
colors: [
'#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',
'#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'
],
Fiddle link :)
Update 1:
Dynamic series fiddle:)
Update 2:
Use the following code to have specific color for specific bar
chart.series[0].addPoint({y: Math.random() * 100, color:'#659355'}, true, true);

You also can put colorByPoint: true in series option.
This way I do in my project, share for whom concern.
plotOptions: {
series: {
pointWidth: 30,
colorByPoint: true,
dataLabels: {
format: '{point.y:.0f}억원',
enabled: true,
align: 'right',
color: '#FFFFFF',
x: -5,
y: 3,
style: {
fontSize: "16px",
color: '#fff',
fontWeight: '500',
}
}
}
},

colors: Array(3).fill().map(()=>`#${Math.floor(Math.random()*16777215).toString(16)}`)

Highcharts bar and scatter series not lining up

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