Develop Reference

highcharts: Add marker to a x-range chart

I want to create a dumbbell chart using highcharts.
I used x-range chart for this
here is the link: https://jsfiddle.net/thushara07/nLkxa0wr/15/
series: [{
// name: 'Project 3',
// pointPadding: 0,
// groupPadding: 0,
//borderColor: 'gray',
pointWidth: 5,
data: [{
x: 32,
x2: 33,
y: 0,
// partialFill: 0.25
}, {
x: 44,
x2:45,
y: 1
}, {
x:30,
x2: 32,
y: 2
}],
dataLabels: {
align: 'left',
enabled: true
}
}]
expected output: I want to show markers for each line created as shown
(https://images.app.goo.gl/LAKQBdsaKBH2hjS59
)

It can be done by adding additional scatter series that is linked to x-range:
Code:
Highcharts.chart('container', {
yAxis: {
title: {
text: ''
},
categories: ['Prototyping', 'Development', 'Testing'],
reversed: true
},
series: [{
type: 'xrange',
pointWidth: 5,
id: 'main',
data: [{
x: 32,
x2: 33,
y: 0
}, {
x: 44,
x2: 45,
y: 1
}, {
x: 30,
x2: 32,
y: 2
}],
dataLabels: {
align: 'center',
enabled: true
}
}, {
type: 'scatter',
linkedTo: 'main',
marker: {
radius: 5
},
data: [{
x: 32,
y: 0,
color: 'red'
}, {
x: 33,
y: 0,
color: 'grey'
}, {
x: 44,
y: 1,
color: 'red'
}, {
x: 45,
y: 1,
color: 'grey'
}, {
x: 30,
y: 2,
color: 'red'
}, {
x: 32,
y: 2,
color: 'grey'
}]
}]
});
Demo:
https://jsfiddle.net/BlackLabel/4qj89cog/
API reference:
https://api.highcharts.com/highcharts/series.scatter
https://api.highcharts.com/highcharts/series.scatter.linkedTo

Trouble gettings CanvasJS to color just the coordinates in the tooltip

The tooltip text:
10
Dataseries 1: 71
Dataseries 2: 77
I'm trying to get the tooltip so the Dataseries 1: and Dataseries 2: remain their current color, and the 10, 71, and 77 are colored red. I have tried toolTipContent: " x: <span style='\"'color: red;'\"'>{x}</span> y: {y} <br/> name: {name}, label:{label} ", but it doesn't change anything. I'm sure its a stupid mistake on my part, but I'm new to using CanvasJS and haven't been able to get anything to work. (https://jsfiddle.net/lightmaster/8p3ygwf1/)
var chart = new CanvasJS.Chart("chartContainer", {
backgroundColor: "RGBA(37, 41, 45, 0.9)",
animationEnabled: true,
title: {
text: " ",
fontSize: 11,
fontColor: ' #ccc',
fontFamily: "arial",
},
toolTip: {
fontStyle: "normal",
cornerRadius: 4,
backgroundColor: "RGBA(37, 41, 45, 0.9)",
toolTipContent: " x: {x} y: {y} <br/> name: {name}, label:{label} ",
shared: true,
},
axisX: {
gridColor: "RGBA(64, 65, 66, 0.8)",
labelFontSize: 10,
labelFontColor: ' #ccc',
lineThickness: 1,
gridThickness: 1,
gridDashType: "dot",
titleFontFamily: "arial",
labelFontFamily: "arial",
interval: "auto",
intervalType: "hour",
minimum: 0,
crosshair: {
enabled: true,
snapToDataPoint: true,
color: "#9aba2f",
labelFontColor: "#ccc",
labelFontSize: 14,
labelBackgroundColor: "#FF8841",
}
},
axisY: {
title: "Temperature (°F) Recorded",
titleFontColor: "#ccc",
titleFontSize: 10,
titleWrap: false,
margin: 10,
lineThickness: 1,
gridThickness: 1,
gridDashType: "dot",
includeZero: false,
gridColor: "RGBA(64, 65, 66, 0.8)",
labelFontSize: 11,
labelFontColor: ' #ccc',
titleFontFamily: "arial",
labelFontFamily: "arial",
labelFormatter: function(e) {
return e.value.toFixed(0) + " °F ";
},
crosshair: {
enabled: true,
snapToDataPoint: true,
color: "#9aba2f",
labelFontColor: "#fff",
labelFontSize: 12,
labelBackgroundColor: "#FF8841",
valueFormatString: "#0.# °F",
}
},
legend: {
fontFamily: "arial",
fontColor: "#ccc",
},
data: [
{
type: "column",
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55 },
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14 }
]
},
{
type: "spline",
dataPoints: [
{ x: 10, y: 77 },
{ x: 20, y: 53 },
{ x: 30, y: 58 },
{ x: 40, y: 61 },
{ x: 50, y: 99 },
{ x: 60, y: 60 },
{ x: 70, y: 20 },
{ x: 80, y: 31 },
{ x: 90, y: 26 }
]
}
]
});
chart.render();
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
<br/>
<!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

At the chart level, instead of toolTipContent you need content. Your toolTipContent code is currently being ignored because that's the property used only at the data level. Here is how you can set a style directly, doing basically what you asked for:
toolTip: {
fontStyle: "normal",
cornerRadius: 14,
backgroundColor: "RGBA(37, 41, 45, 0.9)",
content: "<span style='\"'color: red;'\"'>{x}</span><br/> <span style='\"'color: {color};'\"'>{name}</span> <span style='\"'color: red;'\"'>{y}</span>",
shared: true,
}
Because you are using shared: true, your x value will show up twice. If you don't want that, look into the contentFormatter function for Shared toolTip section in the docs.

How to show only first and last labels in CanvasJS

I need to show first and last labels only in CanvasJS. It's always showing all the labels but my requirement is to show only first and last. Is there any way out to do so?

You can use axisY labelFormatter to do so.
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Chart showing only First and Last Axis Labels",
},
axisY: {
tickColor: "transparent",
labelFormatter: function(e){
if(e.chart.axisY[0].minimum === e.value || e.chart.axisY[0].maximum === e.value)
return e.value;
return "";
}
},
data: [{
type: "column",
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55 },
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14 }
]
}]
});
chart.render();
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 260px; width: 100%;"></div>

You can also try hiding all axis-labels and add stripLines at the minimum and maximum.
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Chart showing only First and Last Axis Labels",
},
axisX: {
valueFormatString: "####"
},
axisY:[{
tickColor: "transparent",
labelFontColor: "transparent"
}],
axisY2:[{
tickColor: "transparent",
labelFontColor: "transparent"
}],
data: [
{
type: "column",
showInLegend: true,
name: "Axis Y-1",
xValueFormatString: "####",
dataPoints: [
{ x: 2006, y: 6 },
{ x: 2007, y: 2 },
{ x: 2008, y: 5 },
{ x: 2009, y: 7 },
{ x: 2010, y: 1 },
{ x: 2011, y: 5 },
{ x: 2012, y: 5 },
{ x: 2013, y: 2 },
{ x: 2014, y: 2 }
]
},
{
type: "column",
showInLegend: true,
axisYType: "secondary",
//axisYIndex: 0, //Defaults to Zero
name: "Axis Y2-1",
xValueFormatString: "####",
dataPoints: [
{ x: 2006, y: 12 },
{ x: 2007, y: 20 },
{ x: 2008, y: 28 },
{ x: 2009, y: 34 },
{ x: 2010, y: 24 },
{ x: 2011, y: 45 },
{ x: 2012, y: 15 },
{ x: 2013, y: 34 },
{ x: 2014, y: 22 }
]
}
]
});
chart.render();
addStripLine(chart);
function addStripLine(chart){
for(var i = 0; i < chart.axisY.length; i++){
min = chart.axisY[i].get("minimum");
max = chart.axisY[i].get("maximum");
chart.axisY[i].addTo("stripLines", {value: min, color: "black", label: min, labelFontColor: "black", labelBackgroundColor: "transparent", labelPlacement: "outside"});
chart.axisY[i].addTo("stripLines", {value: max, color: "black", label: max, labelFontColor: "black", labelBackgroundColor: "transparent", labelPlacement: "outside"});
}
for(var i = 0; i < chart.axisY2.length; i++){
min = chart.axisY2[i].get("minimum");
max = chart.axisY2[i].get("maximum");
chart.axisY2[i].addTo("stripLines", {value: min, color: "black", label: min, labelFontColor: "black", labelBackgroundColor: "transparent", labelPlacement: "outside"});
chart.axisY2[i].addTo("stripLines", {value: max, color: "black", label: max, labelFontColor: "black", labelBackgroundColor: "transparent", labelPlacement: "outside"});
}
}
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 260px; width: 100%;"></div>

How to create chart bar with lines in jQuery

I want create some Chart Bar + line, but i dont know how to combine two chart.
I wannt make Like this pic Bar
Thanks, Hope someone can Help my problem

How about this one https://jsfiddle.net/nu7cx100/
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",{
title:{
text: "Grafik Riwayat PKPT"
},
axisX:{
valueFormatString: "####",
interval: 1
},
axisY:[{
title: "Linear Scale",
lineColor: "#369EAD",
titleFontColor: "#369EAD",
labelFontColor: "#369EAD"
}],
axisY2:[{
title: "Linear Scale",
lineColor: "#7F6084",
titleFontColor: "#7F6084",
labelFontColor: "#7F6084"
}],
data: [
{
type: "column",
showInLegend: true,
//axisYIndex: 0, //Defaults to Zero
name: "ANNGGARAN",
xValueFormatString: "####",
dataPoints: [
{ x: 2006, y: 60 },
{ x: 2007, y: 20 },
{ x: 2008, y: 50 },
{ x: 2009, y: 70 },
{ x: 2010, y: 10 },
{ x: 2011, y: 50 },
{ x: 2012, y: 50 },
{ x: 2013, y: 20 },
{ x: 2014, y: 20 }
]
},
{
type: "line",
showInLegend: true,
axisYIndex: 1, //Defaults to Zero
name: "KEGIATAN",
xValueFormatString: "####",
dataPoints: [
{ x: 2006, y: 15 },
{ x: 2007, y: 3 },
{ x: 2008, y: 20 },
{ x: 2009, y: 10 },
{ x: 2010, y: 15 },
{ x: 2011, y: 10 },
{ x: 2012, y: 20 },
{ x: 2013, y: 20 },
{ x: 2014, y: 2 }
]
}
]
});
chart.render();
}
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
It uses canvasjs
Hope this helps

how to add the navigator for base line highchart to the xaxis from the highstock

i have the base line highchart with the trend line and points ..now i want to add Range for the xaxis in the Single line series highstock ...
This is Jsfiddle please observe :
http://jsfiddle.net/hj22wbe5/7/
And this is the Highstock :
http://www.highcharts.com/stock/demo
or
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/basic-line/
How to add the Navigator for first jsfiddle graph that is having the in the highstock ..
please help
Thanks !!
Edited code :
<!DOCTYPE html>
<html lang="en">
<title>RNA</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv='X-UA-Compatible' content='IE=Edge'/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<body>
<div id="container" style="height: 400px"></div>
</body>
<script type="text/javscript">
$(function () {
var sourceData = [
[0, 99.43],
[1, 99.40],
[2, 99.24],
[3, 99.40],
[4, 99.21],
[5, 99.45],
[6, 99.41],
[7, 99.18],
[8, 99.36],
[9, 99.31],
[10, 99.38],
[11, 99.20],
[12, 99.38],
[13, 99.32]
];
var dates = ['18-Jul-14', '19-Jul-14', '20-Jul-14', '18-Jul-14', '19-Jul-14', '20-Jul-14', '18-Jul-14', '19-Jul-14', '20-Jul-14', '18-Jul-14', '19-Jul-14', '20-Jul-14', '19-Jul-14', '20-Jul-14', '20-Jul-14'];
$('#container').highcharts({
title: {
text: 'RNA - CP ( Radio Network Availability - Customer Perceived)',
x: -20 //center
},
tooltip: {
formatter: function () {
if (this.series.name == 'Series 2') {
return false;
}
//console.log(this.point.extprop);
var s = 'The value for <b>' + this.x +
'</b> is <b>' + this.y + '</b>';
if (this.point.extprop) {
s += 'for <b>' + this.point.extprop + '</b>';
}
return s;
}
},
subtitle: {
text: '',
x: -20
},
navigator: {
enabled: true
},
xAxis: {
labels: {
rotation: 90,
align: "left",
formatter: function () {
return dates[this.value];
},
},
tickInterval: 1
},
yAxis: {
title: {
text: 'Percent'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
//align: 'right',
//verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'RNA',
data: [{
x: 0,
y: 99.43,
extprop: 'power issue'
}, {
x: 1,
y: 99.40,
extprop: 'flood'
}, {
x: 2,
y: 99.24,
color: 'red',
extprop: 'power issue'
}, {
x: 3,
y: 99.40,
extprop: 'flood'
}, {
x: 4,
y: 99.21,
color: 'red',
extprop: 'power issue'
}, {
x: 5,
y: 98.45,
color: 'red',
extprop: 'flood'
}, {
x: 6,
y: 98.41,
color: 'red',
extprop: 'power issue'
}, {
x: 7,
y: 99.18,
color: 'red',
extprop: 'flood'
}, {
x: 8,
y: 99.36,
extprop: 'power issue'
}, {
x: 9,
y: 99.31,
color: 'red',
extprop: 'flood'
}, {
x: 10,
y: 99.38,
extprop: 'power issue'
}, {
x: 11,
y: 99.20,
color: 'red',
extprop: 'flood'
}, {
x: 12,
y: 99.38,
extprop: 'power issue'
}, {
x: 13,
y: 99.32,
extprop: 'flood'
}]
}, {
type: 'line',
marker: {
enabled: false
},
/* function returns data for trend-line */
data: (function () {
return fitData(sourceData).data;
})()
}],
credits: {
enabled: false
}
});
});
</script>
</html>
yes , this is script and one issue when i load in the browser the graph is not displaying and also when i inspect element no errors are there ..i cant able to find the issue ..in the browser its showing empty page..#pawel .
Thanks