Angular highcharts show selected bar in bar chart - javascript

I am using highcharts with angular.
Packages I have included
"highcharts": "^8.0.4",
"highcharts-angular": "^2.4.0"
imports in ts
import * as Highcharts from "highcharts";
Markup on HTML
<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions">
</highcharts-chart>
and this is how I am setting chartOptions
private _setChartData(): void {
let _seriesData: Highcharts.PointOptionsObject[];
let _categories: any[];
_seriesData = this._getSeriesData();
_categories = _seriesData.map((_series) => _series.name);
this.chartOptions = {
chart: {
type: "column"
},
title: {
style: { display: "none" }
},
credits: {
enabled: false
},
xAxis: {
crosshair: true,
categories: _categories
},
yAxis: {
min: 0,
title: {
text: "Production Count"
}
},
tooltip: {
headerFormat: `<span style="font-size:10px">{point.key}</span><table>`,
pointFormat: `<tr>
<td style="padding:0"><b>{point.y}</b></td>
</tr>`,
footerFormat: "</table>",
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
showInLegend: false, data: _seriesData, type: "column",
events: { click: (data: any) => this._chartEventHandler(data.point.options) }
}]
};
}
and here is _getSeriesData data
private _getSeriesData(): Highcharts.PointOptionsObject[] {
const data = getData();
const _seriesData: Highcharts.PointOptionsObject[] = [];
data.forEach((_group, index: number) => {
_seriesData.push({
name: _group.name || "Unknown",
y: _group.count,
// selected : index === 1 ? true : false
});
});
return _seriesData;
}
This works fine.
I want to highlight the selcted bar as it shows as of on hover.
There is way to mark bar as selected but it just change the bar color to gray, i want to the highlight effect.
Is there any way to do this?

Enable allowPointSelect option and use brightness property in states.select:
plotOptions: {
column: {
...,
allowPointSelect: true,
states: {
select: {
color: '',
brightness: 0.1
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/5008/
API Reference:
https://api.highcharts.com/highcharts/series.column.states.select
https://api.highcharts.com/highcharts/series.column.allowPointSelect

Related

Highcharts js Y axis start from last value

I'm working with highchart and I have the following chart working.
However, I need the next value starts at the point of the previous value.
Can someone help me please?
I use this function to generate chart
function generateChart(chartUrl, id) {
let options = {};
$.ajax({
url: chartUrl,
data: {name: id},
success: function (data) {
options.series[0].data = data;
// Get categories dynamicaly, not harcoded
for(let i=0;i<data.length;i++){
options.xAxis.categories.push(data[i][0]);
}
$(`#${id}`).highcharts(options);
}
});
}
And this code to Generate Data and Efects on chart
function generateEfectsChart() {
let options = {
chart: {
type: 'column'
},
title: {
text: ''
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
lineColor: '#FFFFFF',
lineWidth: 0,
gridLineColor: '#DADBDF',
categories: [],
},
yAxis: {
lineColor: '#FFFFFF',
lineWidth: 0,
gridLineColor: '#DADBDF',
plotBands: [{
color: '#000000', // Color value
from: 0, // Start of the plot band
to: 0 // End of the plot band
}],
title: {
text: ''
},
legend: {
enabled: false
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
color: '#000000'
},
colorByPoint: true,
pointWidth: 150
},
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
},
turboThreshold: 0
}
},
series: [{
negativeColor: '#ED4D5F'
}]
};
return options;
}
Use the waterfall series type.
Highcharts.chart('container', {
chart: {
type: 'waterfall'
},
...,
});
Live demo: https://www.highcharts.com/demo/waterfall
Docs: https://www.highcharts.com/docs/chart-and-series-types/waterfall-series

Column rang chart is not getting reset when click on legends in highcharts

I'm tring to achieve,
remove shadow when hovered on column range chart
the chart is not getting reset when clicking on legends in highchart. Please find the link
Example Code JS fiddle
Highcharts.chart('container', {
chart: {
type: 'columnrange',
inverted: true,
},
colors: [
"#105060",
"#1E8199",
"#DB9500",
"#D03D16",
"#8200A3",
"#A60040",
"#3EBEDE",
"#FCAC6B",
"#7FE9CE",
"#FD6FA5",
"#89E3F9",
"#E477FF",
],
yAxis: {
visible: false
},
xAxis: {
categories: xAxisCats,
},
plotOptions: {
series: {
stacking: 'normal',
grouping: false,
showInLegend: true,
groupPadding: 0,
pointPadding: 0,
dataLabels: {
enabled: true,
inside: true,
align: 'center',
formatter: function() {
return this.point.high - this.point.low ? this.point.high - this.point.low : '';
}
}
}
},
tooltip: {
shared: false,
formatter: function() {
const category = this.key + ' : ',
value = this.point.high - this.point.low ? this.point.high - this.point.low : '';
return category + value
// return this.point.high - this.point.low ? this.point.high - this.point.low : '';
}
}...
This is the original graph, when we click on legends(i.e, Dept001) chart not getting reset.
In accition to disabling hover state, disable also inactive state.
plotOptions: {
series: {
states: {
inactive: {
enabled: false
},
hover: {
enabled: false
}
},
...
}
}
Disable ignoreHiddenSeries option:
chart: {
...,
ignoreHiddenSeries: false,
}
Live demo: https://jsfiddle.net/BlackLabel/vn472r18/
API Reference:
https://api.highcharts.com/highcharts/plotOptions.series.states.inactive
https://api.highcharts.com/highcharts/chart.ignoreHiddenSeries

Highcharts how to add treemap upon click event on line chart?

Anyone know how to add treemap upon click event on line chart point? Here's my JSFiddle link:
https://jsfiddle.net/ssoj_tellig/d6pfv1bg/19/
When I click on the line chart on the point 0.63 at the third week of sample5, I'd like a treemap to appear at the bottom with the values loaded in var mytreemap_data (or any other values for the demo, doesn't matter). I'd like to understand how it'd work.
Many thanks for your help!
var mytreemap_data = [1528675200000,0.1,0.2,0.3,0.15,0.25]
// How can we show a tree map at the bottom with the values above
// upon clicking on the point 0.63 for the third week of sample 5 ??
const chart_1 = new Highcharts.stockChart('mychart_1', {
chart: {
zoomType: 'x',
type: 'spline',
},
xAxis: {
type: 'datetime',
tickInterval: 86400000 * 7, //show each week
ordinal: false,
labels:{
formatter: function() {
return Highcharts.dateFormat('%d %b %Y', this.value);
},
align: 'right',
rotation: -90,
},
},
yAxis: {
opposite: false,
min: 0,
max: 1,
tickInterval: 0.1,
title: {
text: 'Score'
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'top'
},
credits : {
enabled : false
},
navigator :{
enabled: true
},
scrollbar :{
enabled: true
},
rangeSelector: {
enabled: true,
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'all',
text: 'All'
}],
selected: 1
},
series: [{
name: 'sample1',
data: [[1527465600000,0.42242020440407213],[1528070400000,0.38747025807155444],[1528675200000,0.42678078180915674],[1529280000000,0.4091743882448146],
[1529884800000,0.4238743811604633],[1530489600000,0.39724984766613747],[1531094400000,0.39441610665405447],[1531699200000,0.41417484302834673],
[1532304000000,0.39208450506752085],[1532908800000,0.4026164523657783]],
}, {
name: 'sample2',
data: [[1527465600000,0.44242020440407213],[1528070400000,0.40747025807155444],[1528675200000,0.44678078180915674],[1529280000000,0.4291743882448146],
[1529884800000,0.4438743811604633],[1530489600000,0.41724984766613747],[1531094400000,0.41441610665405447],[1531699200000,0.43417484302834673],
[1532304000000,0.41208450506752085],[1532908800000,0.4226164523657783]],
}, {
name: 'sample3',
data: [[1527465600000,0.42242020440407213],[1528070400000,0.42747025807155444],[1528675200000,0.46678078180915674],[1529280000000,0.4491743882448146],
[1529884800000,0.4638743811604633],[1530489600000,0.43724984766613747],[1531094400000,0.43441610665405447],[1531699200000,0.45417484302834673],
[1532304000000,0.43208450506752085],[1532908800000,0.4426164523657783]],
}, {
name: 'sample4',
data: [[1527465600000,0.52242020440407213],[1528070400000,0.48747025807155444],[1528675200000,0.52678078180915674],[1529280000000,0.5091743882448146],
[1529884800000,0.5238743811604633],[1530489600000,0.49724984766613747],[1531094400000,0.49441610665405447],[1531699200000,0.51417484302834673],
[1532304000000,0.49208450506752085],[1532908800000,0.5026164523657783]],
}, {
name: 'sample5',
data: [[1527465600000,0.62242020440407213],[1528070400000,0.58747025807155444],[1528675200000,0.62678078180915674],[1529280000000,0.6091743882448146],
[1529884800000,0.6238743811604633],[1530489600000,0.59724984766613747],[1531094400000,0.59441610665405447],[1531699200000,0.61417484302834673],
[1532304000000,0.59208450506752085],[1532908800000,0.6026164523657783]],
}],
plotOptions: {
series: {
label: {
connectorAllowed: false,
},
pointstart: 1527465600000,
// pointInterval = 2,
tooltip: {
valueDecimals: 2
},
}
},
responsive: {
rules: [{
condition: {
maxWidth: 500
},
}]
}
});
document.getElementById('button').addEventListener('click', e => {
var series = chart_1.series[0];
var series1 = chart_1.series[1]
var series2 = chart_1.series[2];
if (series.visible & series1.visible & series2.visible) {
series.hide();
series1.hide();
series2.hide();
e.target.innerHTML = 'Show samples 1-3';
} else {
series.show();
series1.show();
series2.show();
e.target.innerHTML = 'Hide samples 1-3';
}
})
Use click event callback function for a point and create another chart with treemap series, for example:
plotOptions: {
series: {
point: {
events: {
click: function() {
Highcharts.chart('treemapContainer', {
series: [{
type: 'treemap',
data: mytreemap_data
}]
})
}
}
},
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/rh7cfxLj/
API Reference: https://api.highcharts.com/highcharts/plotOptions.series.point.events.click

Changing yAxis and plotOptions for drilldown

I am using HighCharts to visualize percentages from projects, which are downdrilled into variables which make the percentages!
I will give my code :
$(function () {
// Create the chart
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Comparison'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
enabled: true,
text: 'Percentages',
style: {
fontWeight: 'normal'
}
},
labels: {
format: '{value}%'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: '',
colorByPoint: true,
data: []
}],
credits: {
enabled: false
},
drilldown: {
series: [{
name : '',
id: '',
data: []
}]
}
};
$.getJSON('/uploads/fraction.json', function (list) {
options.series = list;
});
$.getJSON('/uploads/drilldown.json', function (list2) {
options.drilldown.series = list2;
var chart = new Highcharts.Chart(options);
});
});
Example of the JSONs:
fraction.json
[{"name":"","colorByPoint":true,"data":[{"name":1,"y":80,"drilldown":1},{"name":2,"y":87,"drilldown":2},{"name":3,"y":105.71428571429,"drilldown":3},{"name":5,"y":"","drilldown":5},{"name":6,"y":53.160248409091,"drilldown":6}]}]
drilldown.json
[{"name":1,"id":1,"data":[["Total",2],["Estimated",2.5]]},{"name":2,"id":2,"data":[["Total",3.9],["Estimated",4.5]]},{"name":3,"id":3,"data":[["Total",3.7],["Estimated",3.5]]},{"name":5,"id":5,"data":[["Total",""],["Estimated",0.44]]},{"name":6,"id":6,"data":[["Total",0.233905093],["Estimated",0.44]]}]
I would like the graph to show percentages above the column and on the yAxis when the graph is first loaded, but absolute values when the drilldown is activated. I didn't manage to get it until now. Could you help me?
There are two ways of doing those changes - a static and dynamic way. Static way - define data labels and tooltip options for drilldown series.
Dynamic way - apply the options on drilldown/drillup events.
events: {
drilldown: function(options) {
this.yAxis[0].update({
labels: {
format: '{value}'
}
}, false, false);
options.seriesOptions.dataLabels = {
format: '{point.y:.1f}'
};
options.seriesOptions.tooltip = {
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>'
};
},
drillup: function () {
this.yAxis[0].update({
labels: {
format: '{value}%'
}
}, false, false);
}
}
example: http://jsfiddle.net/d4fmaeea/
Two warnings:
In your json files, you have points which has value equals to "" which is not a valid type (must be number/null) and it may cause some issues, e.g. column with value 0 will have the same height as the column with value 10.
$.getJSON() is an asynchronous function. You use getJSON to assign list to options.series but that part may be executed after the chart was created so you would end up with the chart with no top-level series, only the drilldown ones.
Async part of code:
$.getJSON('/uploads/fraction.json', function (list) {
options.series = list;
});
$.getJSON('/uploads/drilldown.json', function (list2) {
options.drilldown.series = list2;
var chart = new Highcharts.Chart(options);
});

How Can I Remove This White Box Behind This HighCharts Sparkline (Code and Picture Included)

In the code provided below, you can see that I have a list of data series all with Data and a Name, and for each series in that list, I am trying to create a highcharts sparkline. The data for the sparkline is bound using KnockoutJS. However, there is this pesky white background square that I can't figure out how to remove (pictured below).
var highChartsFunction = $(function () {
Highcharts.SparkLine = function (a, b, c) {
var hasRenderToArg = typeof a === 'string' || a.nodeName,
options = arguments[hasRenderToArg ? 1 : 0],
defaultOptions = {
chart: {
renderTo: (options.chart && options.chart.renderTo) || this,
borderWidth: 0,
type: 'area',
backgroundColor: '#eeeeee',
width: 120,
height: 50,
style: {
overflow: 'visible'
},
skipClone: true
},
title: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
labels: {
enabled: false
},
title: {
text: null
},
startOnTick: false,
endOnTick: false,
tickPositions: []
},
yAxis: {
endOnTick: false,
startOnTick: false,
labels: {
enabled: false
},
title: {
text: null
},
tickPositions: [0]
},
legend: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
animation: false,
lineWidth: 1,
marker: {
enabled: false
},
states: {
hover: {
enabled: false
}
},
fillOpacity: 0.25,
color: "#2aabb2"
},
},
};
options = Highcharts.merge(defaultOptions, options);
return hasRenderToArg ?
new Highcharts.Chart(a, options, c) :
new Highcharts.Chart(options, b);
};
var $tds = $('div[data-sparkline]');
function doChunk() {
var i,
len = $tds.length,
$td,
stringdata,
data,
chart;
for (i = 0; i < len; i += 1) {
$td = $($tds[i]);
stringdata = $td.data('sparkline');
data = $.map(stringdata.split(','), parseFloat);
chart = {};
$td.highcharts('SparkLine', {
series: [{
data: data,
pointStart: 1
}],
chart: chart
});
}
}
doChunk();
});
Here is the html behind the sparklines:
<ul data-bind="foreach: $parent.series">
<li>
<span data-bind="text: Name"></span>
<div data-sparkline="#" data-bind="attr: { 'data-sparkline': Data } "></div>
</li>
</ul>
And finally, the picture of the output:
Is there anyway to remove this white square? I've tried all of the background attributes and the borders and nothing seems to work. Whenever I add this into JFiddle, the charts look just fine and do not have the white square, so I cannot recreate the issue there in order to isolate it. Thank you in advance for any help you can give!
Hard as there isn't a live example. Try the below though:
ul,
ul li {
padding: 0px !important;
margin:0px !important;
}

Categories