How to overcome overlapping series lines in highcharts spline - javascript

I have a trend chart implemented using highcharts, the data is loaded via json dynamically. The chart renders properly with the data but however the series lines, data labels and symbols overlap each other at given data points. How do I overcome this?
Find the link to Fiddle - https://jsfiddle.net/ashanwijenayake/ft0ke201/
Screenshot
function renderTrendChart(){
$("#trendChartContainer").highcharts({
title: {
text: 'Indicator Vs Action Trend Chart',
x: -20
},
xAxis: {
categories: trendChartCategoies
},
yAxis: {
minRange: 1,
allowDecimals: false,
min: 0,
title: {
text: 'Cases Identified'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
plotOptions: {
series: {
pointPadding: 10,
groupPadding: 10,
cursor: 'pointer',
}
},
series: [{"name": "Pneumothorax", "data": [ { "y": 1, "marker": { "symbol": "text:" }, "dataLabels": { "x": -10, "y": -2, "enabled": true, "format": "2", "style": { "fontWeight": "bold", "fontSize": "12px" } } },{ "y": 2, "marker": { "symbol": "text:" }, "dataLabels": { "x": -10, "y": -2, "enabled": true, "format": "2", "style": { "fontWeight": "bold", "fontSize": "12px" } } } ], "id": "Pneumothorax" },{"name": "Respiratory", "data": [ 0,{ "y": 1, "marker": { "symbol": "text:" }, "dataLabels": { "x": -10, "y": -2, "enabled": true, "format": "1", "style": { "fontWeight": "bold", "fontSize": "12px" } } } ], "id": "Respiratory" },{"name": "Exsanguination", "data": [ 0,{ "y": 2, "marker": { "symbol": "text:" }, "dataLabels": { "x": -10, "y": -2, "enabled": true, "format": "3", "style": { "fontWeight": "bold", "fontSize": "12px" } } } ], "id": "Exsanguination" }]
});
}

Related

Scatter plot not showing anything chartjs needs some debugging

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
"type": "scatter",
"data": {
"datasets": [
{
"label": "EARRINGS",
"data": [
{
"x": 13,
"y": "19-07-2021"
},
{
"x": 5,
"y": "12-08-2021"
}
],
"showLine": true,
"fill": false,
"borderColor": "rgb(125,60,122)"
},
{
"label": "RINGS",
"data": [
{
"x": 4,
"y": "09-08-2021"
},
{
"x": 1,
"y": "06-08-2021"
},
{
"x": 9,
"y": "12-08-2021"
}
],
"showLine": true,
"fill": false,
"borderColor": "rgb(125,60,122)"
},
{
"label": "BANGLES",
"data": [
{
"x": 2,
"y": "06-08-2021"
},
{
"x": 1,
"y": "12-08-2021"
}
],
"showLine": true,
"fill": false,
"borderColor": "rgb(125,60,122)"
},
{
"label": "NECKLACES",
"data": [
{
"x": 1,
"y": "12-08-2021"
}
],
"showLine": true,
"fill": false,
"borderColor": "rgb(125,60,122)"
}
]
},
"options": {
"scales": {
"x": {
"title": {
"display": true,
"text": "Date"
},
"ticks": {
"precision": 0,
"maxTicksLimit": 9
}
},
"y": {
"title": {
"display": true,
"text": "No of Trials"
},
"ticks": {
"precision": 0
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart"></canvas>

2 things, dont use an outdated version of the lib since your config wont work and the y scale is a linear scale by default so if you want to use strings you need to specify it as a category scale
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
"type": "scatter",
"data": {
"datasets": [
{
"label": "EARRINGS",
"data": [
{
"x": 13,
"y": "19-07-2021"
},
{
"x": 5,
"y": "12-08-2021"
}
],
"showLine": true,
"fill": false,
"borderColor": "rgb(125,60,122)"
},
{
"label": "RINGS",
"data": [
{
"x": 4,
"y": "09-08-2021"
},
{
"x": 1,
"y": "06-08-2021"
},
{
"x": 9,
"y": "12-08-2021"
}
],
"showLine": true,
"fill": false,
"borderColor": "rgb(125,60,122)"
},
{
"label": "BANGLES",
"data": [
{
"x": 2,
"y": "06-08-2021"
},
{
"x": 1,
"y": "12-08-2021"
}
],
"showLine": true,
"fill": false,
"borderColor": "rgb(125,60,122)"
},
{
"label": "NECKLACES",
"data": [
{
"x": 1,
"y": "12-08-2021"
}
],
"showLine": true,
"fill": false,
"borderColor": "rgb(125,60,122)"
}
]
},
"options": {
"scales": {
"x": {
"title": {
"display": true,
"text": "Date"
},
"ticks": {
"precision": 0,
"maxTicksLimit": 9
}
},
"y": {
type: 'category',
"title": {
"display": true,
"text": "No of Trials"
},
"ticks": {
"precision": 0
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
<canvas id="myChart"></canvas>

Chart.js bar graph not centered when there is only 1 item

When there is only one item in a bar graph the bar isn't centered:
https://codepen.io/anon/pen/rKmrpX?editors=1010
HTML:
<canvas id="myChart" width="400" height="400"></canvas>
JS:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
"labels": ["2018-06-01T04:00:00.000Z"],
"datasets": [{
"type": "bar",
"label": "Earnings",
"yAxisID": "left-y-axis",
"borderColor": "rgba(107, 165, 57, 1)",
"backgroundColor": "rgba(107, 165, 57, 0.4)",
"data": [25.77]
}, {
"type": "line",
"label": "Pageviews",
"yAxisID": "right-y-axis",
"backgroundColor": "rgba(70, 152, 203, 0.4)",
"borderColor": "rgba(70, 152, 203, 1)",
"pointBackgroundColor": "rgba(70, 152, 203, 1)",
"pointRadius": 0,
"data": [3426]
}]
},
options: {
"scales": {
"xAxes": [{
"maxBarThickness": 100,
"type": "time",
"offset": true,
"time": {
"unit": "day",
"tooltipFormat": "MMM-D",
"displayFormats": {
"day": "MMM-D",
"month": "MMM"
}
},
"ticks": {
"maxRotation": 0,
"maxTicksLimit": 7,
"autoSkip": true
},
"gridLines": {
"display": false,
"offsetGridLines": true
}
}],
"yAxes": [{
"id": "left-y-axis",
"type": "linear",
"position": "left",
"ticks": {
"beginAtZero": true
},
"scaleLabel": {
"display": true,
"labelString": "Earnings"
}
}, {
"id": "right-y-axis",
"type": "linear",
"position": "right",
"ticks": {
"beginAtZero": true
},
"gridLines": false,
"scaleLabel": {
"display": true,
"labelString": "Pageviews"
}
}]
},
"tooltips": {
"callbacks": {}
}
}
});
Is there a fix for this? Perhaps I'm missing an option that should be passed in?
Using the latest version of Chart.js (2.7.2) here.

Removing most of the xAxes config seams to give the result you are looking for
https://codepen.io/tryggvigy/pen/rKmQpX?editors=1010
"scales": {
"xAxes": [{
"maxBarThickness": 100,
}],

How to render overall data labels using highcharts?

I'm having trouble displaying the targets variable for the data labels in the chart shown below.
For some reason the series data labels display only the targetsAdjvalue.
I tried adding stacked labels on the y-axis but it didn't work. How else can this be done?
ar targets = [<?php echo $gg[0][24].",".$gg[0][20].",".$gg[0][26].",".$gg[0][22].""; ?>],
mcbf = [ <?php echo $gg[0][16].",".$gg[0][17].",".$gg[0][18].",".$gg[0][19].""; ?>],
targetsAdj = [],
attagg=[],
calc,
calc2;
for (var i=0;i<targets.length;i++) {
calc = targets[i] >= mcbf[i] ? targets[i] - mcbf[i] : 0;
targetsAdj.push(calc);
}
for (var i=0;i<mcbf.length;i++) {
calc2 = (mcbf[i]/targets[i])>=0.7 ? {y:mcbf[i],color:'#1de9b6',borderColor:'#00bfa5'} : ((mcbf[i]/targets[i])>=0.4 ? {y:mcbf[i],color:'#ffeb3b',borderColor:'#fdd835'}:{y:mcbf[i],color:'tomato',borderColor:'#d84315'});
attagg.push(calc2);
}
$('#attivazioni').highcharts(
{
"colors":
["tomato"
, "lime"
, "rgba(139,188,33,.5)"
, "rgba(145,0,0,.5)"
, "rgba(26,173,206,.5)"
, "rgba(73,41,112,.5)"
, "rgba(242,143,67,.5)"
, "rgba(119,161,229,.5)"
, "rgba(196,37,37,.5)"
, "rgba(166,201,106,.5)"],
"chart": {
"zoomType": "x",
"showAxis": true,
"alignTicks": true,
//"height": 300,
"style": {
"fontFamily": "Helvetica, Arial, sans-serif",
"color": "#333"
},
"backgroundColor": "#ffffff"
},
"title": {
"text": " "
},
"xAxis": [{
"tickmarkPlacement": "on",
"labels": {
"style": {
"fontSize": "10px",
"color": "#333"
},
"useHTML": true
},
"gridLineColor": "lightgrey",
"gridLineWidth": 0,
"categories": ["<span style=\"font-size:12px\"><b>Lead</span>"
, "<span style=\"font-size:12px\"><b>Lvc</span>"
, "<span style=\"font-size:12px\"><b>Push</span>"
, "<span style=\"font-size:12px\"><b>AddOn</span>"]
}],
"yAxis": [{
"alternateGridColo": "null",
"minorTickInterval": "auto",
"lineColor": '#000',
"tickWidth": "1",
"tickColor": '#000',
"gridLineColor": "#C0C0C0",
"gridLineWidth": 1,
"lineColor": "#C0C0C0",
"lineWidth": 1,
"endOnTick": true,
"min": 0,
"labels": {
"formatter": function () {
return '%' + this.axis.defaultLabelFormatter.call(this);
} ,
"style": {
"fontSize": "10px",
"color": "black"
}
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
},
formatter: function() {
return Highcharts.numberFormat(this.total, 2, ',');
}
},
title: {
text: '',
style: {
display: 'none'
}
},
subtitle: {
text: '',
style: {
display: 'none'
}
},
}],
"legend": {
"enabled": false
},
"navigation": {
"buttonOptions": {
"enabled": false
}
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true,
"style": {
"color": "#333"
},
"crop": false,
"overflow": "none"
},
"shadow": false,
"marker": {
"enabled": false
}
},
"column": {
"grouping": false,
"stacking": "percent",
"shadow": false
}
},
"credits": {
"enabled": false
},
"tooltip": {
"enabled": false,
"shared": true,
"valueDecimals": 0
},
"series": [{
"name": "Target",
"type": "column",
"color": "rgba(140, 131, 131, 0.49)",
"borderColor": "#B0BEC5",
"borderWidth": 2,
"data": targetsAdj,
"dataLabels": {
y:-18,
verticalAlign:'top',
"formatter": function() {
if (this.series.index == 0) return targets[this.point.x];
else return this.y;
}
}
},{
"name": "SELLS",
"type": "column",
"data": attagg,
"color": "#1de9b6",
"borderColor": "grey",
"borderWidth": 2,
"zIndex": 10
} ]
});

i resolved by setting series datalabels to false. and changing yaxis settings to :
yAxis: {
min: 0,
max: 105,
endOnTick: false,
title: {
text: null
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: 'black'
}
}
},

How to display no data found in highcharts

In highcharts, if there is no data found in the json value, I want to display an error message.
I used this code:
if(options.series[0].data.length == 0) {
alert('nodatafound');
} else {
var chart = new Highcharts.Chart(options);
}
This error appears:
TypeError: options.series[0].data is undefined
Data from JSON:
{
"chart": {
"renderTo": "container2",
"type": "column",
"marginRight": 10,
"marginBottom‌": 125
},
"title": {
"text": "",
"x": -20
},
"exporting": {
"enabled": false
},
"credits": {
"enab‌led": false
},
"subtitle": {
"text": "",
"x": -20
},
"xAxis": {
"labels": {
"rotation": -90,
"sty‌le": {
"fontSize": "10px"
}
}
},
"yAxis": {
"title": {
"text": ""
},
"plotLines": [{
"width": 1,
"c‌olor": "#808080"
}]
},
"tooltip": {
"shared": true
},
"legend": {
"align": "right",
"verticalA‌lign": "top",
"x": 0,
"y": 20,
"borderWidth": 0
},
"plotOptions": {
"column": {
"stacking": "no‌rmal",
"dataLabels": {
"enabled": false,
"color": "white"
}
}
},
"series": [{
"name": "2015-16-Q1"
}, {
"name": "2015-16-Q2"
}, {
"name": "2015-16-Q3"
}, {
"na‌me": "2015-16-Q4"
}]
}

You can use no-data module which allows do that.
Ref: http://code.highcharts.com/modules/no-data-to-display.js
Example: http://jsfiddle.net/6o8o03fe/1/

Staged labels for xaxis with zero values

I'm trying to draw a combination chart with two series represented with bars. Each one has its own xaxis, on the top and in the bottom. In my example I have one of them with zero values. The problem is that xaxis for the series with zero values is staged (bottom xaxis in the example). I don't know why. If I modify the series to non-zero values the xaxis labels are perfect.
$(function () {
$('#container').highcharts({
"colors": ["#00bdbd","#666666"],
"legend": {
"align": "center",
"verticalAlign": "top",
"x": 0,
"y": 10,
"borderWidth": 0
},
"xAxis": {
"labels": {
"rotation": 0,
"align": "right",
"staggerLines": 1,
"y": 4
},
"title": {
"style": {
"color": "#757477"
}
},
"categories": ["Asturias","Cantabria"],
"lineWidth": 0,
"tickLength": 0
},
"yAxis": [{
"title": {
"text": "Tourists",
"style": {
"color": "#666666"
}
},
"min": 0
},
{
"title": {
"text": "Tourists",
"style": {
"color": "#666666"
}
},
"min": 0,
"opposite": true
}],
"series": [{
"name": "Zero",
"type": "bar",
"data": [0,0],
"yAxis": 0,
"stack": 0,
"zIndex": 0,
"animation": true
},
{
"name": "Visits",
"type": "bar",
"data": [8000,3000],
"yAxis": 1,
"stack": 1,
"zIndex": 0,
"animation": true
}]
});
});
In this highcharts example you can see the problem.
Thank you.

You can set staggerLines parameter as 1.
labels:{
staggerLines:1
},
Example: http://jsfiddle.net/2wusojab/1/

Categories