Highcharts - hide line between markers - javascript

I'm using highcharts do draw some markers, and I really need not to show the line between them. I know that I can accomplish that by dividing the series, but I would like to ask to the community if there is another way.
I have already tried lineWidth = 0, but it keeps drawing a thin line between points.
Line width
Line marker
To better exemplify, I built the following jsFiddle:
https://jsfiddle.net/L0gkwfxs/
Highcharts.chart('container', {
chart: {
backgroundColor: 'transparent'
},
credits: false,
navigation: {
buttonOptions: {
theme: {
fill: 'white',
padding: 5,
stroke: 'none'
}
}
},
title: {
text: null
},
subtitle: {
},
xAxis: [{
visible: true,
offset: 0.1,
},
{
visible: false
}],
plotOptions: {
series: {
pointWidth: -5
}
},
yAxis: [{
visible: true,
reversed: true,
gridLineWidth: 0,
title: {
text: 'MD (m)',
style: {
fontSize: '10px'
}
},
min: 2000,
max: 6500
},
{
opposite: true,
gridLineWidth: 0,
title: {
text: null,
}
}
],
legend: {
enabled: false
},
series: [
{
animation: {
duration: 5000
},
lineWidth: 0,
name: 'Sensor',
color: 'RGBA(255,0,47,0.6)',
data: [
[
2000.5,
5601,
5603
],
[
2000.5,
6815,
6817
]
],
dataLabels: {
enabled: false
},
marker: {
enabled: true,
radius: 6,
symbol: "triangle-down"
},
enableMouseTracking: true
}
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>
Can anyone help me?
Thanks in advance!

This behaviour occurs due to lineWidthPlus option which as default adds one-pixel to the hovered line width.
plotOptions: {
series: {
states: {
hover: {
lineWidthPlus: 0
}
}
}
},
Demo:
https://jsfiddle.net/BlackLabel/jonL1ymg/
API Reference:
https://api.highcharts.com/highcharts/series.line.states.hover
Another solution, which I recommend, is just using scatter series which shows only markers by default.
Demo:
https://jsfiddle.net/BlackLabel/k6Lsu2a0/
API Reference:
https://api.highcharts.com/highcharts/series.scatter

Related

Highcharts Tooltip - Getting rid of the marker dot?

I would like to get rid of the small dot in my tooltip display. I am using High-charts. I Can you please help in modifying this feature, here is my code:
Highcharts.getJSON(
'https://code.highcharts.com/mapdata/custom/world.topo.json',
topology => {
const chart = Highcharts.mapChart('container', {
chart: {
map: topology
},
title: {
text: ''
},
legend: {
enabled: false,
align: 'center',
verticalAlign: 'bottom',
itemStyle: {
fontWeight: 'bold',
fontSize: '20px'
}
},
mapNavigation: {
enabled: true,
enableDoubleClickZoomTo: true,
buttonOptions: {
align: 'right',
verticalAlign: 'bottom'
}
},
mapView: {
maxZoom: 30,
projection: {
name: 'Orthographic',
rotation: [60, -30]
}
},
colorAxis: {
min: 0,
max: 100,
text: '',
stops: [[0, 'darkgrey', ''], [0, '#5ce1e6', '{{question['answer1']}}'], [0.49, '#c9f5f7', ''], [.50, '#aee0a0', ''], [.51, '#fff4c8', ''], [1, '#ffde59', '{{question['answer2']}}']],
title: {
text: '',
},
},
credits: {
enabled: false
},
tooltip: {
useHTML: true,
pointFormat: '{point.name} <br> <div style="display: inline-block;" class="square-answer1-globe"></div>{{question["answer1"]}}: {point.value1}% <br> <div style="display: inline-block;" class="square-answer2-globe"></div>{{question["answer2"]}}: {point.value2}%',
backgroundColor: 'black',
style: {
color: 'white'
},
},
plotOptions: {
series: {
animation: {
duration: 750
},
clip: false
}
},
mapline: {
color: Highcharts.getOptions().colors[0]
},
series: [{
name: 'Graticule',
id: 'graticule',
type: 'mapline',
data: getGraticule(),
nullColor: 'lightgrey',
color: 'lightgrey',
accessibility: {
enabled: false
},
enableMouseTracking: false
},
{
data,
joinBy: 'name',
name: '',
states: {
hover: {
color: '',
borderColor: '#000000'
}
},
accessibility: {
exposeAsGroupOnly: true
}
}]
});
Here is an image of what is displayed: enter image description here
I want to get rid of the little dot in the top left of the tooltip box. I have been trying everything and it always seems to appear there. I have tried adding in "Marker: false", but maybe I am not inputting it in the correct spot (not sure if this is the correct code).
You can use formatter option for the tooltip, something like this, but add your values:
tooltip: {
formatter: function(tooltip) {
return `${question1}: <b>${percentage1}</b><br/>`
}
},
Here is documentation about it: https://api.highcharts.com/highcharts/tooltip.formatter

Is it possible to show text on top of an Arearange chart

Highcharts.chart('container', {
chart: {
type: 'arearange',
zoomType: 'x',
scrollablePlotArea: {
minWidth: 600,
scrollPositionX: 1
}
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
//type: 'datetime',
accessibility: {
rangeDescription: 'Range: Jan 1st 2017 to Dec 31 2017.'
}
},
yAxis: {
title: {
text: null
},
labels: {
enabled:true
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
//stacking: 'normal',
borderColor: '#303030',
color : '#cac9c9',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#303030'
}
},
dataLabels: {
useHTML: true,
enabled: true,
inside: true,
align:'left',
allowDecimals: true,
formatter: function(){
return "SOME_TEXT_INSIDE_HTML_TAG";
}
},
},
series: [{
data: [
[0, 10],
[0, 10],
],
borderColor: 'black',
borderWidth: 0.2,
},
{
data: [
[20, 40],
[20, 40],
]
}]
});
Above is the code for an Area range chart. Couple of questions.
I just want to show some random text on top of each area. I tried with dataLabels but I doesn't seem to work. Isn't it possible to do so?
Yaxis seems to be shown in AreaRange chart when mouse is hovered over the chart. Can it be set to be displayed by default?
Any help would be much appreciated. Thanks in advance.
I tried to reproduce your code and here is an output: https://jsfiddle.net/BlackLabel/uqmyjsr9/
The dataLabels config needs to be nested in the series object.
plotOptions: {
series: {
//stacking: 'normal',
borderColor: '#303030',
color: '#cac9c9',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#303030'
},
dataLabels: {
useHTML: true,
enabled: true,
inside: true,
align: 'left',
allowDecimals: true,
formatter: function() {
return "SOME_TEXT_INSIDE_HTML_TAG";
}
},
},
},
I am not sure here - the yAxis is displayed all the time, not only after hovering over the chart.

high charts starting new line from each point

I am using high charts to show energy data but i think due to some negative value high caharts starting a new line from each new point and lines not have any connection between them.
here is the picture of my results.
problem Image
you can see in the image there should be only one line.
here's my data for this.
I have 4 series's to show in graph but here i am only providing one because each line have same issue
var data={'vt':[[1588273200000, 0],[1586372400000, 245],[1586286000000, 200],[1586199600000, 7],[1586113200000, 4],[1586026800000, 1],[1585940400000, 4],[1588186800000, 40],[1585854000000, 7],[1588100400000, 30],[1588014000000, 155],[1587927600000, 38],[1587841200000, 57],[1587754800000, 35],[1587668400000, 66],[1587582000000, 68],[1587495600000, 35],[1587409200000, 40],[1587322800000, 62],[1585767600000, 8],[1587236400000, 37],[1587150000000, 44],[1587063600000, 72],[1586977200000, 13],[1586890800000, 5],[1586804400000, 58],[1586718000000, 90],[1586631600000, 41],[1586545200000, 186],[1586458800000, -498]]};
and here's how i initialize the highcharts object.
$('#'+id).highcharts({
title: {
text: titletext
},
time: {
timezone: 'Asia/Karachi'
},
chart: {
zoomType: 'x',
title: 'Meter 1'
},
xAxis: {
labels: {
formatter:function(){
return Highcharts.dateFormat("%b %e", this.value);
}
},
title: {
text: 'Date'
},
showLastLabel: true,
tickmarkPlacement: 'on',
tickPosition: 'inside',
tickWidth: 0,
tickPixelInterval: 60,
lineWidth: 2,
lineColor: 'rgba(255,205,255,0.6)',
minPadding: 0,
gridLineWidth: 0,
offset: 20,
type: 'datetime',
tickInterval: 24 * 3600 * 1000,
endOnTick: true,
},
yAxis: {
gridLineColor: 'black',
gridLineWidth: 0,
title: {
enabled: true,
text: cap
},
labels: {
enabled: true
}
},
tooltip: {
backgroundColor: 'white',
borderColor: 'black',
shadow: true,
style: {
color: 'black',
fontSize: '12px',
padding: '8px'
},
enabled: true,
crosshairs: false,
shared: false,
snap: 30,
},
plotOptions: {
flags: {
shape: 'squarepin'
}
},
series: [
{
name: 'Total kwh',
data: data.vt
},
{
name: 'Day kwh',
data: data.dt
},
{
name: 'Peak kwh',
data: data.pt
},
{
name: 'Off Peak kwh',
data: data.opt
}
],
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30,
navigation: {
enabled: true
},
adjustChartSize: true,
},
exporting: {
filename: titletext+'_'+"<?php echo $_SESSION['username']; ?>"+'_'+todayDate(),
buttons: {
contextButton: {
menuItems: ["viewFullscreen",
"separator",
"downloadJPEG",
"separator",
"downloadXLS",
]
}
}
},
credits: {
enabled: false
}
}
)
You need to provide an external graph value for z-index which will identify its position
Please go through this fiddle link with ur dataset. I have improved ur code.
So you can review it.
https://jsfiddle.net/vishalanand77/f6dnua28/32
You have unsorted data - Highcharts error #15: https://www.highcharts.com/errors/15/
You can sort it in this way:
data.vt.sort(function(a, b) {
return a[0] - b[0];
});
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4993/

Highcharts elements are not aligned

I am trying to split the data contained in a dict into multiple charts. Each chart has two series: column and marker. If represent all the data in a single chart, everything works fine, but if I try to split it, the columns and the marker don't get aligned for some reason
function setup_chart(chart_container){
return new Highcharts.chart(chart_container, {
chart: {
alignTicks: false,
type: 'columnrange',
inverted: true,
zoomType: 'y',
panning: true,
},
credits: {
enabled: false
},
title: {
text: null
},
xAxis: {
categories: [],
className: 'chart-axis-title',
title: {
align:'high'
},
offset: -10
},
navigation: {
buttonOptions: {
x: 5,
y: -12
}
},
yAxis:[{
minRange: 1,
max:null,
min:null,
allowDecimals: false,
title: {
text: 'Days'
},
labels:{
formatter:function(){
if(this.value !=0){
return this.value;
}
}
}
},{
tickPositions: [0, 100],
visible: false
}],
tooltip: {
},
exporting: {
scale: 3,
chartOptions: {
legend: {
enabled: true
}
}
},
legend: {
enabled: false
},
series: [{
yAxis: 1,
data:[]
},{
name: 'Days',
data: [],
stickyTracking: true
}]
});
}
I'm passing the data via jinja2 and populate the chart in the following way:
var options_data_cm = {{options|tojson|safe}}[k]['cms'];
var cm_groups = {{cm_group_dict}};
var cms_details = {};
for(var key in cm_groups){
cms_details[key] = {
"data":[],
"left":[],
"right":[],
"cols":[],
"categories":[]
}
}
for(var key in cms_details){
var crtChart = $('#'+key).highcharts();
crtChart.xAxis[0].update({title:{ text: ""+cm_groups[key] }});
crtChart.addSeries({
type: 'column',
yAxis: 1,
data: cms_details[key]['cols'],
zIndex: 1,
minPointLength: 10,
threshold: -0.1,
pointPadding: 0,
pointRange: 0,
groupPadding: 0,
showInLegend: false,
tooltip: {
pointFormat: false
},
states: {
hover: {
enabled: false
}
}
});
crtChart.addSeries({
name: "Study Days",
dataLabels: {
enabled: false,
padding: 10,
borderWidth: 0,
useHTML:false,
formatter:function(){
if(this.y != 0)
return this.y;
}
},
stickyTracking: false,
data: cms_details[key]['data'],
borderWidth: 0,
zIndex: 5,
maxPointWidth: 5,
tooltip:{
followPointer:true
},
point: {
events: {
click: function() {
if (url != "")
window.open(url,'_blank');
}
}
}
});
crtChart.addSeries({
type:'scatter',
stickyTracking:false,
tooltip:{snap:0},
data:cms_details[key]['left'],
zIndex: 1
});
crtChart.addSeries({
type:'scatter',
stickyTracking:false,
tooltip:{snap:0},
data:cms_details[key]['right'],
zIndex: 1
});
crtChart.xAxis[0].setCategories(cms_details[key]['categories']);
}
Here are two pictures, the first one is with assignment without breaking the data into multiple charts, the second one is an attempt to split it :
I've tried to inspect the content of the data and it seems OK in the sense that both have the same coordinates, however they are shifted.
EDIT:
Here's the link to the jsfiddle
I have managed to solve the issue by adding pointPlacement: 0.2 to the series which was displaced.

combination chart (area and bar) highchart

I have a bar graph, I want to plot a shaded area on the same graph whose max and min range say are -1000k and -1250k, which most probably is a area-range graph. I cannot find an example in highchart doc, so need help.
The graph I have now -> http://jsfiddle.net/hhh2zx3w/6/
var c2chart3=Highcharts.chart("container1", {
colors: ['rgb(90,198,140)','rgb(255,179,137)','rgb(246,151,159)','rgb(55,183,74)','rgb(169,99,169)','rgb(0,191,243)','rgb(223,200,24)','rgb(242,100,38)'],
chart: {
type: 'bar',
backgroundColor: 'rgba(0,0,0,0.7)',
style: {
color: '#FFF',
fontSize: '9px',
fontFamily: 'MP'
},
},
title: {
text: ''
},
xAxis: {
title: {
text: null
},
gridLineWidth:0,
lineWidth:0,
tickWidth: 0,
title: {
text: ''
},
labels: {
style: {
color: '#FFF',
fontSize: '9px',
fontFamily: 'MP'
},
formatter: function(){
return ""
}
},
},
yAxis: {
// min: -2000000,
// max: 1000000,
gridLineColor: '#fff',
gridLineWidth: 0,
lineWidth:0,
plotLines: [{
color: '#fff',
width: 1,
value: 0
}],
title: {
text: '',
align: 'high'
},
title: {
text: ''
},
labels: {
style: {
color: '#FFF',
fontSize: '9px'
},
},
},
tooltip: { enabled: false },
credits: { enabled: false },
exporting: { enabled: false },
plotOptions: {
bar: {
dataLabels: {
enabled: true,
style: {
textOutline: false,
color:'#fff',
}
}
},
series: {
colorByPoint: true,
pointWidth: 1,
borderWidth:0,
dataLabels: {
enabled: true,
formatter: function(){
}
}
}
},
legend: { enabled: false },
credits: { enabled: false },
series: [{
data: [-510362,-371233,-1593711,-388465,352395,179298,-1190969,-907204]
}]
});
What I want is something like shown in the image
The feature you are referring to is called as the "Plot Bands" in Highchart
Here is how you can do it.
plotBands: [{
color: 'tomato',
from: -1000000,
to: -1250000
}],
you can have plot bands with respect to any axis.
Here is a jsfiddle for your ref: http://jsfiddle.net/hhh2zx3w/7/
Highcharts API ref: https://api.highcharts.com/highcharts/yAxis.plotBands

Categories