I need to translate the marker symbols by some pixels such that it doesn't overlap with the series line. But nothing seems working. Any suggestion?
Code:
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
series: [{
marker: {
symbol: 'url(http://www.highcharts.com/demo/gfx/snow.png)',
},
data: [{
y: 10,
}, {
y: 25,
}, {
y: 12,
}, {
y: 31
}]
}]
},function(chart){
$.each(chart.series[0].data,function(i,point){
this.graphic.attr({
transform: "translate(-13,0)"
});
});
});
});
Jsfiddle link: http://jsfiddle.net/yd8hV/13/
You should wrap your $.each() function into setTimeout() function.
setTimeout(function () {
$.each(chart.series[0].data, function (i, point) {
this.graphic.attr({
transform: "translate(-15,-35)"
});
});
}, 50);
You need to do it because translate options are modified later than your callback function.
example:
http://jsfiddle.net/izothep/yd8hV/20/
Related
Example Chart Image
I want to show tooltip for Approval Count as 0 on hovering anywhere in it's general vicinity, is that possible with highcharts?
You can render this particular column as a dummy point - full range & transparent color to show a tooltip for it.
Highcharts.chart('container', {
chart: {
type: 'bar'
},
yAxis: {
max: 10
},
tooltip: {
formatter(tooltip) {
if (this.point.isEmpty) {
return 'Null';
}
return tooltip.defaultFormatter.call(this, tooltip);
}
},
series: [{
data: [{
x: 0,
y: 2
}, {
x: 1,
y: 3
}, {
x: 2,
y: 10,
color: 'transparent',
isEmpty: true
}, {
x: 3,
y: 8
}, {
x: 4,
y: 2
}]
}]
});
Demo: https://jsfiddle.net/BlackLabel/ef8sj4no/
API: https://api.highcharts.com/highcharts/tooltip.formatter
A smoother line is needed (the line should rise smoothly and evenly), but the values should not change. Is it possible to build a more straight line without changing the values?
Screen with explanations: http://prntscr.com/qudf96
And my code:
<script>
function reDrawCalc(gdata, gcurr, nums = 2) {
Highcharts.chart('container', {
chart: {
height: 400,
type: 'area',
margin: [20, 0, 20, 0]
},
title: {
text: null
},
subtitle: {
text: null
},
exporting: {
enabled: false
},
xAxis: {
gridLineWidth: 1,
categories: ['One', 'Two', 'Three', 'Four', 'Five']
},
yAxis: {
gridLineWidth: 0,
},
tooltip: {
enabled: false,
crosshairs: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
inside: false,
style: {
fontFamily: 'Rubik, sans-serif',
textTransform: 'uppercase',
fontSize: 'none',
fontWeight: 'normal',
textShadow: 'none'
},
formatter: function() {
return '<div class="chitem-time">'+ this.x+'</div>'
+'<div class="chitem-val">'+ Highcharts.numberFormat(this.y,nums)+'<sup>'+gcurr+'</sup></div>';
}
}
}
},
series: [{
type: 'areaspline',
data: gdata,
lineWidth: 5,
color: '#f0c997',
fillColor:'transparent'
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
chart: {
height: 350,
type: 'area',
margin: [20, 0, 20, 0]
},
series: [{
type: 'areaspline',
data: gdata,
lineWidth: 3,
color: '#f0c997',
fillColor:'transparent'
}],
}
}]
}
});
}
</script>
Is it possible to do it? And how to modify my code for it?
Thank you very much in advance!
As I mentioned in the comment current line shape is at it is because of the points positions on the chart. If you don't need to keep points actual positions the solution which you can use is to use the dummy data for the points and use the correct one in the dataLabels. See:
Demo: https://jsfiddle.net/BlackLabel/fshx3n50/
data: [{
y: 5,
z: 0.20
}, {
y: 10,
z: 1.40
}, {
y: 18,
z: 6.20
}, {
y: 30,
z: 18.00
}, {
y: 50,
z: 73.00
}],
I also changed the formatter function to display the z value in dataLabel:
formatter: function() {
return '<div class="chitem-time">' + this.x + '</div>' +
'<div class="chitem-val">' + Highcharts.numberFormat(this.point.z) + '<sup>REM</sup></div>';
}
I changed the official chart, but the crosshair not my expected.
DEMO : Official synchronized-charts
What I changed :
Add xAxis.categories as my custom xAxis labels
Change series[0].fillOpacity 0.3 to 1
Use my custom json data
CODE :
```javascript
//$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=activity.json&callback=?', function (activity) {
var json = {
xData: ["1/1", "1/2", "1/3", "1/4", "1/5", "1/6", "1/7", "1/8", "1/9", "1/10"],
datasets: [{
name: "Num of dog",
data: [1,2,3,4,5,1,2,3,4,5],
unit: "dogs",
type: "area",
valueDecimals: 0
},{
name: "Num of cat",
data: [1,2,3,4,5,1,2,3,4,5],
unit: "cats",
type: "area",
valueDecimals: 0
}]
};
//$.each(activity.datasets, function (i, dataset) {
$.each( json.datasets, function (i, dataset) {
// Add X values
dataset.data = Highcharts.map(dataset.data, function (val, j) {
//return [activity.xData[j], val];
return [json.xData[j], val];
});
$('<div class="chart">')
.appendTo('#container')
.highcharts({
...,
xAxis: {
crosshair: true,
events: {
setExtremes: syncExtremes
},
categories: ["1/1", "1/2", "1/3", "1/4", "1/5", "1/6", "1/7", "1/8", "1/9", "1/10"],
//labels: {
//format: '{value} km'
//}
},
...,
series: [{
...,
fillOpacity: 1,
//fillOpacity: 0.3,
...
});
```
DEMO : My synchronized-charts
What I need:
Display crosshair line, like Official synchronized-charts
Don't show circle point, like Official synchronized-charts
Show circle point When mouse hover, like Official synchronized-charts
Crosshair line put to front
Does anyone know to accomplish this?
Thank you!
For Don't show circle point, like Official synchronized-charts. Added
plotOptions: {
series: {
marker: {
enabled: false
}
pointPlacement: 'on'
}
},
For Crosshair line put to front. Updated xAxis
xAxis: {
categories: json.xData,
tickmarkPlacement: 'on',
crosshair: {
width: 2,
zIndex: 3
},
events: {
setExtremes: syncExtremes
},
},
/*
The purpose of this demo is to demonstrate how multiple charts on the same page can be linked
through DOM and Highcharts events and API methods. It takes a standard Highcharts config with a
small variation for each data set, and a mouse/touch event handler to bind the charts together.
*/
/**
* In order to synchronize tooltips and crosshairs, override the
* built-in events with handlers defined on the parent element.
*/
$('#container').bind('mousemove touchmove touchstart', function(e) {
var chart,
point,
i,
event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
point = chart.series[0].searchPoint(event, true); // Get the hovered point
if (point) {
point.highlight(e);
}
}
});
/**
* Override the reset function, we don't need to hide the tooltips and crosshairs.
*/
Highcharts.Pointer.prototype.reset = function() {
return undefined;
};
/**
* Highlight a point by showing tooltip, setting hover state and draw crosshair
*/
Highcharts.Point.prototype.highlight = function(event) {
this.onMouseOver(); // Show the hover marker
this.series.chart.tooltip.refresh(this); // Show the tooltip
this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};
/**
* Synchronize zooming through the setExtremes event handler.
*/
function syncExtremes(e) {
var thisChart = this.chart;
if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
Highcharts.each(Highcharts.charts, function(chart) {
if (chart !== thisChart) {
if (chart.xAxis[0].setExtremes) { // It is null while updating
chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {
trigger: 'syncExtremes'
});
}
}
});
}
}
// Get the data. The contents of the data file can be viewed at
// https://github.com/highcharts/highcharts/blob/master/samples/data/activity.json
var json = {
xData: ["1/1", "1/2", "1/3", "1/4", "1/5", "1/6", "1/7", "1/8", "1/9", "1/10"],
datasets: [{
name: "Num of dog",
data: [1, 2, 3, 4, 5, 1, 2, 3, 4, 5],
unit: "dogs",
type: "area",
valueDecimals: 0
}, {
name: "Num of cat",
data: [1, 2, 3, 4, 5, 1, 2, 3, 4, 5],
unit: "cats",
type: "area",
valueDecimals: 0
}]
}
//$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=activity.json&callback=?', function(activity) {
$.each(json.datasets, function(i, dataset) {
// Add X values
dataset.data = Highcharts.map(dataset.data, function(val, j) {
return [json.xData[j], val];
});
$('<div class="chart">')
.appendTo('#container')
.highcharts({
chart: {
marginLeft: 40, // Keep all charts left aligned
spacingTop: 20,
spacingBottom: 20
},
title: {
text: dataset.name,
align: 'left',
margin: 0,
x: 30
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
categories: json.xData,
tickmarkPlacement: 'on',
crosshair: {
width: 2,
zIndex: 3
},
events: {
setExtremes: syncExtremes
},
},
yAxis: {
title: {
text: null
},
zIndex: 1000
},
plotOptions: {
series: {
marker: {
enabled: false
},
pointPlacement: 'on'
}
},
tooltip: {
positioner: function() {
return {
x: this.chart.chartWidth - this.label.width, // right aligned
y: 10 // align to title
};
},
borderWidth: 0,
backgroundColor: 'none',
pointFormat: '{point.y}',
headerFormat: '',
shadow: false,
style: {
fontSize: '18px'
},
valueDecimals: dataset.valueDecimals
},
series: [{
data: dataset.data,
name: dataset.name,
type: dataset.type,
color: Highcharts.getOptions().colors[i],
fillOpacity: 1,
tooltip: {
valueSuffix: ' ' + dataset.unit
}
}]
});
});
//});
.chart {
min-width: 320px;
max-width: 800px;
height: 220px;
margin: 0 auto;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Fiddle demo
I use buttons to switch the chart type from pie to column and back. Pie is the default. When I switched to column, no categories are shown.
Image: Pie is the default
Here is a fiddle: http://jsfiddle.net/Gebifa/vLrx47a6/1/
I aleady tried to set x-axis categories but only got Highcharts Error 18 - The requested axis does not exist. Do anybody have an idea how to show the labels? Thanks in advance.
exporting: {
buttons: {
contextButton: {
symbol: 'url(../../img/chartexport.png)'
},
barButton: {
x: -30,
_titleKey: 'barChart',
onclick: function () {
$.each(this.series,function(i,serie){
serie.update({
type:'column',
tooltip: {
positioner: function () {
return { x: 0, y: 0 };
},
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
shared: true
}
});
});
},
symbol: 'url(../../img/chartButtonBar.png)'
},
pieButton: {
x: -60,
_titleKey: 'pieChart',
onclick: function () {
$.each(this.series,function(i,serie){
serie.update({
type:'pie',
tooltip: {
positioner: function () {
return { x: 0, y: 0 };
},
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.2f}%</b><br/>',
shared: true
}
});
});
},
symbol: 'url(../../img/chartButtonPie.png)'
}
},
This might help you switching between two charts. Please provide fiddle if it does not fix the issue.
$('#Pie').click(function () {
chart.inverted = true;
chart.xAxis[0].update({}, false);
chart.yAxis[0].update({}, false);
chart.series[0].update({
type: 'pie'
});
}
http://jsfiddle.net/wvymmy80/
I think your xAxis configuration has a little issue, title is not required in xAxis configuration.Please try replacing below code.
xAxis: {
categories: ["20-29 years", "30-39 years", "40-49 years", "50-59 years", "60-69 years", ],
enabled: false,
text: '',
style: {
color: '#656565'
},
tickmarkPlacement: 'between',
labels: {
style: {
color: '#656565'
},
rotation: 0
},
crosshair: true
},
Fiddle: http://jsfiddle.net/xxLochh6/
Is there some way to rotate each marker by different-different angles?
lets say , In the following example, In series 1, the image markers should hv (30, 90) and in series 2, (150, 60) degree rotations respectively.
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
JS
$(function () {
$('#container').highcharts({
chart: {
},
xAxis: {
minPadding: 0.05,
maxPadding: 0.05
},
series: [{
data: [
{
y: 29.9,
x:0,
marker: {
symbol: 'url(http://www.highcharts.com/demo/gfx/snow.png)'
}
},
{
y: 71.9,
x:1,
marker: {
symbol: 'url(http://www.highcharts.com/demo/gfx/snow.png)'
}
},
[3, 106.4]
]
},
{
data: [
{
y: 60,
x:0,
marker: {
symbol: 'url(http://www.highcharts.com/demo/gfx/snow.png)'
}
},
{
y: 25,
x:1,
marker: {
symbol: 'url(http://www.highcharts.com/demo/gfx/snow.png)'
}
},
[3, 90]
]
}]
});
});
Code example
Unfortunately it is not officially supported, but you can use workaround, which iterate on each point and rotate by attr() function. It is not perfect, but you can use translate to move markers.
http://jsfiddle.net/yd8hV/2/
$.each(chart.series[0].data,function(i,point){
if(!point.angle)
point.angle = 0;
this.graphic.attr({
rotation:point.angle
})
.translate(10,-10);
});