I am implementing the area chart as shown in the mock up, but have strict at some portion and not able to get option s that are available in http://api.highcharts.com/highcharts for configuring the chart to look as is.
Here is the mock up look.
What I have achieved so far is :
Fiddle Demo
So I could not able to achieve the
1.background color
backgroundColor: {
linearGradient: false,
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(200, 200, 255)']
]
},
2 . Only outer border line. (As shown in the mock up)
3 . On Hover Show All 3 labels. (As shown in the mock up)
4 . Legend like "CPM IMPS SPEND BY TIME" with colors I mean I want to acheive same as in mock up.
Last Point to implement :
Well..
1.background color:
chart: {
backgroundColor: 'black', //for whole plot
name: 'IMPS',
data: [
...
], color: 'rgb(213, 156, 72)' //for one area
2 . Only outer border line. (As shown in the mock up)
yAxis: [{
lineWidth: 1,
title: {
text: ''
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
},
gridLineWidth: 0,
minorGridLineWidth: 0
}, {
lineWidth: 1,
title: {
text: ''
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
},
gridLineWidth: 0,
minorGridLineWidth: 0,
linkedTo: 0,
opposite: true
}],
3 . On Hover Show All 3 labels. (As shown in the mock up)
tooltip: {
pointFormat: '{series.name} <b>${point.y:,.0f}</b> <br/>', //like in mock up
shared: true, //all series
crosshairs: true //vertical line
},
4 . Legend like "CPM IMPS SPEND BY TIME" with colors I mean I want to acheive same as in mock up.
so I already answered how do it in this question
Last Point to implement :
js:
tooltip: {
backgroundColor: null,
borderWidth: 0,
shadow: false,
useHTML: true,
style: {
padding: 0
},
and now you can customize your tooltip like you want:
.highcharts-tooltip>span p {
margin: 0;
}
.highcharts-tooltip>span span{
display: none;
}
#pCPM{background: rgb(87, 188, 0);}
#pIMPS{background: rgb(213, 156, 72);}
#pSPEND{background: rgb(12, 170, 226);}
Highchart's API don't allows you to set current values on axis, but you can disable default labels and put handmade labels with position absolute like I already doing with legend.
Summary FIDDLE
Related
I'm struggling with Highcharts, I just want to highlight my columns on mouse hover events this way:
I used fake data like below, but I don't think it's the right way to perform this, moreover I want to keep the tooltip on real columns only, not above the fake one, even though I enabled shared tooltip.
series: [
{
states: {
hover: {
color: 'rgba(0, 0, 0, 0.4)',
},
},
data: [400000, 400000, 400000, 400000......], // fake data
type: 'bar',
color: 'white',
pointPlacement: 'on',
pointWidth: 120,
grouping: false,
tooltip: { enabled: false },
},
{
data, // real data from elsewhere
type: 'bar',
events: {
mouseOver: () => displayFakeData(),
mouseOut: () => hideFakeData(),
},
use xAxis.crosshair of Highchart for the hovered point.
xAxis: {
crosshair: {
color: "D9FFFFFF" // change BG color here
}
},
Code and Demo Here: https://jsfiddle.net/08m21kxo/16/
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
I have created a treemap using Highcharts, but the top and left borders are missing. I've been reading through the docs but can't find anything which will help.
I have created a Codepen here. You can see that against the black background the borders along the top and left sides of the series aren't visible. I think they're there, but maybe the chart is offset on the X/Y by a pixel or something.
Highcharts.setOptions({
colors: ['#263542', '#3d4d5d', '#41474d', '#515961', '#292e33', '#24445e'],
lang: {
thousandsSep: ','
}
});
Highcharts.chart('treemap', {
chart: {
backgroundColor: 'rgba(255,255,255,0)',
borderColor: 'rgb(255,255,255)'
},
credits: {
enabled: false
},
plotOptions: {
series: {
colorByPoint: true,
borderColor: 'rgb(71, 116, 135)',
borderWidth: 1,
dataLabels: {
enabled: true,
style: {
textOutline: 'none',
fontFamily: 'Roboto',
fontWeight: '300',
fontSize: '1rem'
}
}
}
},
tooltip: {
valuePrefix: '£'
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: [{
name: 'Indices',
value: 230000,
}, {
name: 'Forex',
value: 120000,
}, {
name: 'Shares',
value: 55000,
}, {
name: 'Pension',
value: 55000,
}, {
name: 'ISA',
value: 20000,
}]
}],
title: {
text: ''
},
legend: {
enabled: false
}
});
body {
background: #000;
}
#treemap {
width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="treemap"></div>
I cannot comment yet, so this is not really and answer. But I found that if you change your borderWidth to 2, then the border becomes visible. To me this indicates that the margin or padding of your element is covering up the border in the top left section of the element for some reason. Hope this can point you in some sort of direction.
It looks like, even though axes (xAxis/yAxis) are not visible in treemap chart, they have impact on it, by covering left and top part of the border. Setting the offset property in both axes with small value (e.g. 1) will move them away from plot area, uncovering missing border parts.
API Reference:
http://api.highcharts.com/highcharts/yAxis.offset
http://api.highcharts.com/highcharts/xAxis.opposite
Example:
http://jsfiddle.net/20oh9c3d/
I need to remain the functionality of extensible scroll bar, but I don't need overview navigator. Like :
I need the scroll bar(area 1) to still remains extensible, but remove the navigator(area 2).
This is a design of what I want:
demo you could quickly modify from :
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
// Create the chart
var chart = $('#container').highcharts('StockChart', {
rangeSelector : {
enabled: false
},
title: {
text: null
},
navigator: {
enabled:false,//make it false , but the scroll bar is not extensible
outlineWidth: 0
},
scrollbar: {
barBackgroundColor: '#ccc',
barBorderWidth: 0,
buttonBackgroundColor: '#ccc',
buttonBorderWidth: 0,
buttonArrowColor: '#fff',
buttonBorderRadius: 3,
rifleColor: '#fff',
trackBackgroundColor: 'white',
trackBorderWidth: 1,
trackBorderColor: '#ccc',
trackBorderRadius: 3
},
series: [{
type:'areaspline',
showInLegend: false,
name: 'AAPL1',
data: data
},{
type:'areaspline',
showInLegend: false,
name: 'AAPL2',
data: data.map(function(d){return [d[0],parseInt(d[1])*2 ]})
}]
});
});
});
Scrollbar can not be resized like Navigator, so I think what you really want to use is (2) Navigator and disable (1) Scrollbar. Here is simple example do to do: http://jsfiddle.net/dJbZT/183/
navigator: {
enabled:true,
outlineWidth: 0,
height: 14,
maskFill: '#cccccc',
series: {
data: [] // empty navigator
},
xAxis: {
labels: {
y: -20 // move labels outside the navigator
}
}
},
If the navigator should have background, you can add two dummy points for the series, one at the beginning of the original series and one on the end:
data: [
[data[0][0], 2],
[data[data.length - 1][0], 2]
]
Then just set color and fillOpacity for a series, to the color you want to achieve, and set yAxis.max below your dummy value (2 in my case). Working demo: http://jsfiddle.net/dJbZT/184/
I not only want my legend to contain series' names, I also want it to contain name of my other items like my plotline. Here is my code:
plotLines: [
{
color: 'red',
dashStyle: 'shortdash',
value: response.AverageTime,
width: 2,
label: {
text: response.PlotLineName,
x: +10,
y: +30,
rotation: 360,
color: 'red'
}
}
]
So I want my plotline's name which is "Average Velocity Deviation" looks like in the legend box like below. How can I achieve that?
You can create an empty series which mimics the characteristics of the plot line (color, dash style...). You can then optionally use the legendItemClick event to "link it up" to the plot line.
For example, you predefine these variables for ID and plot line options:
plotLineId = 'myPlotLine'; // To identify for removal
// Plot line options for adding
plotLineOptions = {
color: '#FF0000',
id: plotLineId,
width: 2,
value: 5.5,
dashStyle: 'shortdash'
};
Your axis plotline:
xAxis: {
plotLines: [ plotLineOptions ]
}
Your mimic series:
series: [
// ...
{
// Series that mimics the plot line
color: '#FF0000',
name: 'My plotline',
dashStyle: 'shortdash',
marker: {
enabled: false
},
events: {
// Event for showing/hiding plot line
legendItemClick: function(e) {
if(this.visible) {
this.chart.xAxis[0].removePlotLine(plotLineId);
}
else {
this.chart.xAxis[0].addPlotLine(plotLineOptions);
}
}
}
}
]
See this JSFiddle demonstration of how it works (or this minimal example, without events).
Just as an alternative, if you're going to go so far as to make a fake series that mimics all of the aspects of your plot line...
You can just use that series as your plotLine, and skip all of the extra work of tying everything together...
like:
{
name: 'Plot Line',
color: 'red',
type:'line',
dashStyle: 'shortdash',
lineWidth: 2,
data: [[minXvalue, plotLineValue], {x:maxXvalue, y:plotLineValue, dataLabels: { enabled: true }}]
}
Example:
http://jsfiddle.net/jlbriggs/3d3fuhbb/74/