How to set border in column chart - Highchart - javascript

Can anyone help how to set border in column chart, On click each bar to set a different border and color.
Please use this Reference Code:
plotOptions: {
series: {
allowPointSelect: true,
states: {
select: {
color: null,
borderWidth:5,
borderColor:'Blue'
}
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});

Updating my previous Post.
Here I am using Highcharts default colors by index e.point.index value to set borders color of column and border width is also set by index e.point.index value by click on each column. You can also use custom array of border width and color and access this by e.point.index.
plotOptions: {
series: {
events: {
click: function(e) {
var chart = e.point.series.chart;
e.point.select(true, true);
chart.series[0].data[e.point.index].graphic.attr({
'stroke': colors[e.point.index],
'stroke-width': width[e.point.index],
'fill':Highcharts.defaultOptions.colors[e.point.index],
});
}
},
}
},
var colors= ['#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE',
'#DB843D', '#92A8CD', '#A47D7C', '#B5CA92'];
var width=[2,5,6,8,9,3,4] ;
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
events: {
click: function(e) {
var chart = e.point.series.chart;
e.point.select(true, true);
chart.series[0].data[e.point.index].graphic.attr({
'stroke': colors[e.point.index],
'stroke-width': width[e.point.index],
'fill':Highcharts.defaultOptions.colors[e.point.index],
});
}
},
/*allowPointSelect: true,
states: {
select: {
borderWidth: 4,
borderColor: '#e4b0b2'
}
}*/
}
},
series: [{
name: 'John',
data: [3, 4, 4, 2, 5],
showInLegend: false,
name: 'Twitter Trending',
colorByPoint: true,
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

You can use plotOptions.series.point.events.click callback function to update any of the point's properties (color, border etc.).
plotOptions: {
series: {
point: {
events: {
click: function() {
this.update({
color: Highcharts.defaultOptions.colors[Math.round(Math.random() * 10)]
});
}
}
}
}
}
Live demo: http://jsfiddle.net/kkulig/dtdw81L7/

Related

highcharts group series click event to get all data in catagory

I have the following chart that on click will return the category plus the series data you clicked on. If you see in the chart I have three columns in my bar chart I wanted to get all three series data on the click. is there anyway to do this?
Here is my existing JS Fiddle js-fiddle-link
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar']
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
alert('Category: ' + this.category + ', value: ' + this.y);
}
}
}
}
},
series: [{
data: [29.9, 71.5, 106.4]
},
{
data: [50, 71.5, 106.4]
},
{
data: [21, 71.5, 106.4]
}]
});
I don't know if there is an easier way to access the series data but this snippet does what you want.
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar']
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
const series = this.series.chart.options.series;
const values = series.map(serie => serie.data[this.index]);
console.log(values);
}
}
}
}
},
series: [{
data: [29.9, 71.5, 106.4]
},
{
data: [50, 71.5, 106.4]
},
{
data: [21, 71.5, 106.4]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

Highcharts disable click on column

I have a column chart. When clicking one of the vertical bars, the color of the selected bar changes. I want to disable this behaviour by disabling the detection of the 'click' event on the graph so when the user clicks there nothing happens.
Anyone knows how to do that?
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
backgroundColor: 'transparent',
container: {
onclick : null
}
},
colors: ['#27A1DE'],
title: {
text: null
},
credits : {
enabled: false
},
exporting : {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
title: {
text: 'h',
align: 'high',
offset: -15
},
tickColor : 'transparent',
labels: {
style: {
fontWeight:'bold'
},
y: 12,
formatter: function() {
var index = this.axis.categories.indexOf(this.value);
var yValue = this.chart.series[0].yData[index];
if (yValue === 0){
return '<span>'+this.value+'</span>';
} else {
return '<span style="color:#009DE0;">'+this.value +'</span>';
}
}
},
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
min: 0,
labels: {
enabled: false
},
gridLineWidth: 0,
lineWidth: 1,
title: {
align: 'high',
rotation: 0,
text: 'kWh',
offset: 0,
y: -2
}
},
plotOptions: {
column: {
pointPadding: 0.05,
groupPadding: 0,
dataLabels : {
enabled: true,
crop :false,
overflow: 'none',
rotation: 270,
x:2,
y:-14,
style: {
color: '#009DE0',
fontSize: 'xx-small',
},
formatter: function() {
if (this.y != 0){
return '<span>'+this.y +'</span>';
} else {
return '<span style="display:none;">'+this.y +'</span>';
}
}
},
borderWidth: 0,
events: {
click: function(e){
//this.update({ color: '#27a1de' }, true, false);
e.preventDefault();
return false;
}
}
},
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
}
}
}
}
},
series: [{
name: '',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}],
tooltip: {
enabled: false
}
});
Fiddle : here
Thanks
the way I understood your problem, you want to remove the style change on mouse hover (as there is no color change on click in your fiddle unlike you described).
http://jsfiddle.net/6pur4o1w/
states: { hover: 'none' }
in the series should do what you want.

Howto move dataLabels to the border of the plot area?

I have a bar chart. I want the dataLabels to not stick onto the bars, but move it to the most right border of the plot area and have it text-aligned right.
This is what I have come to so far: (jsfiddle)
$(function () {
var cat = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']; //, 'Sep', 'Oct', 'Nov', 'Dec', 'foo', 'bar', 'bla'];
var barWidth = 16;
chart = new Highcharts.Chart({
chart: {
type: "bar",
renderTo: 'container',
events: {
load: function() {
var plotHeight = this.plotHeight;
console.log('plotHeight = ' + plotHeight);
var catWidth = (barWidth-2) / (2*plotHeight/cat.length);
var plot = [];
for(var i=0; i<(cat.length); i+=1) {
var newPlot = {
color: 'grey',
width: 1,
value: i+catWidth //+(cat.length/($('#container').height()/10))
};
plot.push(newPlot);
this.xAxis[0].addPlotLine(newPlot);
}
//this.xAxis[0].addPlotLine(plot);
}
}
},
title: {
text: null
},
credits: {
text: null,
enabled: false
},
xAxis: {
categories: cat,
title: {
text: null,
enabled: false
}
},
yAxis: {
title: {
text: null,
enabled: false
},
labels: {
enabled: false
},
gridLineWidth: 0,
gridLineColor: 'none'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
color: '#000',
formatter: function() {
return Math.abs(this.y).toFixed(1) + '%';
},
crop: false, // DIRTY!!! :(
overflow: 'justify', // DIRTY!!! :(
x: -360 // DIRTY!!! :(
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5], //, 216.4, 194.1, 95.6, 54.4, 9.9, 9.9, 9.9],
pointWidth: barWidth
}]
});
});
I have to stick at mostly native Highcharts as I need to export the chart as svg to reuse in a pdf file. So using CSS and useHtml: true are out of question as well as dirty hacks like crop: false, overflow: 'justify', dataLabels.x: -360 (just to show you what I want to do - although it is not right aligned).
How am I able to accomplish that?
You can use workaround with the translating datalables like here:
var width = chart.plotWidth;
$.each(chart.series[0].data, function(i,d){
var bbox = d.dataLabel.getBBox().width;
d.dataLabel.attr({
x: width - bbox
});
});
http://jsfiddle.net/9YyVJ/2/

Disabling HighCharts labels

I'm using Highcharts and I want to turn off all the labels. I made my own graph that has its own title and data axes. How do I make the ones provided by Highcharts invisible?
At the moment, I just need to get rid of the y axis marks but I'm not certain how.
Here's what I have so far:
$('#container').highcharts({
chart: {
type: 'area',
backgroundColor: 'transparent'
},
title: {
text: ' '
},
credits: {
enabled: false
},
xAxis: {
categories: [' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ']
},
series: [{
name: 'Rich',
color: '#FF0000',
data: []
}, {
name: 'Poor',
data: []
}]
});
}
Highcharts has fabulous documentation with fiddle examples for most stuff: http://api.highcharts.com/highcharts
http://jsfiddle.net/fnHzg/
$('#container').highcharts({
chart: {
},
title : {
text: null
},
xAxis: {
title: {
enabled: false
}
},
yAxis: {
title: {
enabled: false
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
To also turn off the yAxis and xAxis labels and tick marks:
xAxis: {
title: {
enabled: false
},
labels: {
enabled: false
},
tickLength: 0
},
yAxis: {
title: {
enabled: false
},
labels: {
enabled: false
},
tickLength: 0
},

Change HighCharts pointInterval after creating chart

I'm using the HighCharts library to chart very large datasets (i.e., ~18,000 points). I'm using quantization on the backend to reduce the number of points to a reasonable size (less than 200). When the user selects a section of the chart, it makes an ajax request to the server and receives a new set with a higher sample frequency. However, when change the pointInterval in plotOptions, it doesn't actually change the interval on the displayed chart.
These are my options that I use to make the chart:
options = {
chart: {
renderTo: settings.highchartId,
zoomType: 'x',
spacingRight: 20,
events: {
load: getChartData,
selection: zoomChart,
}
},
title: {
text: Drupal.settings.openfitcharts.title
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Drag your finger over the plot to zoom in'
},
xAxis: {
allowDecimals: false,
title: {
text: Drupal.settings.openfitcharts.xAxisTitle
}
},
yAxis: {
title: {
text: Drupal.settings.openfitcharts.yAxisTitle
},
startOnTick: false,
showFirstLabel: false
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
series: [{
type: "line",
data: [],
}],
plotOptions: {
line: {
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
},
pointInterval: 1,
pointStart: 0,
}
}
};
This is the function I use to get the data:
function getChartData() {
activityId = settings.seriesData.activityId;
trackType = settings.seriesData.type;
jQuery.getJSON(OPENFIT_DATA_URL, {op: 'TrackHandler.getTrackData', actid: activityId, type: trackType}, function(returnData) {
console.log(returnData);
console.log(chart);
if (returnData != null) {
chart.options.plotOptions.line.pointInterval = returnData.interval;
chart.options.plotOptions.line.pointStart = returnData.start;
chart.xAxis[0].adjustTickAmount();
chart.series[0].setData(returnData.data, true);
}
});
}
You can also use series.update() to update all options once, see: http://jsfiddle.net/7XcMn/
chart.series[0].update({
pointInterval: 100,
data: [100, 200, 300]
});
Change the pointInterval of the series object not the plotOptions:
chart.series[0].pointInterval = 24 * 3600 * 1000;
chart.series[0].setData([29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],true);
See this fiddle.

Categories