I want to apply style to the bar
But this code does not working
Please help!
plotOptions.series.className <<=== not working
https://api.highcharts.com/highcharts/plotOptions.series.className
//css
._chart_bar {
border-radius: 3px;
width: 8px;
}
//js
Highcharts.chart(containerId, {
chart: {
type: 'bar',
spacingBottom: 0,
spacingTop: 0,
spacingLeft: 20,
spacingRight: 20,
height: 150,
},
title: {
text: '',
},
xAxis: {
categories,
labels: {
useHTML: true,
formatter: xAxisFormatter,
},
lineWidth: 0,
},
yAxis: {
min: 0,
title: {
text: '',
},
labels: {
enabled: false,
},
gridLineWidth: 0,
},
legend: {
enabled: false,
},
exporting: {
// 상단 우측 context 메뉴 없애기
buttons: {
contextButton: {
enabled: false,
},
},
},
plotOptions: {
series: {
stacking: 'percent',
className: '_chart_bar', <=============== here is not working
color: barColor,
},
},
series: seriesValues,
credits: {
enabled: false,
},
}, () => {});
}, [categories, seriesValues, barColor]);
The className property works correctly - you can see that your CSS class is added to a series group element correctly.
To style the columns, you need to use .highcharts-point CSS class or the custom one, added by className property for points.
Live demo: http://jsfiddle.net/BlackLabel/4xz2rwfp/
API Reference: https://api.highcharts.com/highcharts/series.column.data.className
Related
I have a waterfall chart working, but I need that penultimate column start at zero.
I think I need to create a dummy point that hide and set Axis.min on the second point y position, but I can't put this working.
chart: {
type: 'waterfall'
},
title: {
text: ''
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
//colors: ['#DADBDF', '#ED4D5F','#ED4D5F','#ED4D5F','#ED4D5F','#ED4D5F','#D7EAFD','#D7EAFD','#D7EAFD' ],
xAxis: {
lineColor: '#FFFFFF',
lineWidth: 0,
gridLineColor: '#DADBDF',
categories: [],
},
yAxis: {
lineColor: '#FFFFFF',
lineWidth: 0,
gridLineColor: '#DADBDF',
plotBands: [{
color: '#000000',
from: 0,
to: 0
}],
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,
label: {
enabled: false
}
}
},
series: [{
data: [],
showInLegend: false,
}],
You can add another waterfall series with defined x values:
Highcharts.chart('container', {
chart: {
type: 'waterfall'
},
...,
plotOptions: {
series: {
grouping: false
}
},
series: [{
data: [...]
}, {
data: [{
y: 569000,
x: 5
}, {
y: 1569000,
x: 6
}]
}]
});
Live example: https://jsfiddle.net/BlackLabel/qc07y5kf/
API Reference: https://api.highcharts.com/highcharts/series.waterfall.data
We are having some issues when working with highcharts in React. When I change to full screen mode using the menu button I am not able to see the option "Exit from full screen". Instead, the option stills "View in full screen".... However, if I click this option it actually exit full screen mode. I want to be able to see the text "exit full screen". I think the problem is in the event declared on the last lines of this code (exporting.chartOptions.chart).
useEffect(() => {
const chart = chartRef?.current?.chart;
if (!chart?.renderer) return;
setChartOptions(({ chart, credits, legend, xAxis, yAxis, plotOptions, ...currentOptions }) => ({
...currentOptions,
chart: {
...chart,
...chartExtraOptions.current?.chart,
},
credits: {
...credits,
position: {
...credits?.position,
...chartExtraOptions.current?.credits.position,
},
},
legend: {
...legend,
...chartExtraOptions.current?.legend,
},
xAxis: {
...xAxis,
...chartData?.xAxis,
title: { text: undefined },
plotLines: [
{
value: ((chartData?.xAxis?.max ?? 0) + (chartData?.xAxis?.min ?? 0)) / 2,
color: "#84acbc",
},
],
},
yAxis: {
...yAxis,
...chartData?.yAxis,
title: { text: undefined },
plotLines: [
{
value: ((chartData?.yAxis?.max ?? 0) + (chartData?.yAxis?.min ?? 0)) / 2,
color: "#84acbc",
},
],
},
series: chartData?.series,
exporting: {
chartOptions: {
chart: {
events: {
load: function (this) {
chartAxesTitles.current.forEach((element) => {
const { args, attr, css } = element.svg.userOptions;
// Use updated x and y positions
const newArgs = [args[0], element.svg.x, element.svg.y];
createLabel(this.renderer, { args: newArgs, attr, css });
renderWatermarkLabels(this, true);
});
// console.log(this);
},
},
},
},
},
but i have no idea why!!! Any ideas? Thanks!
I add the config for the charts in case it helps:
import { WATERMARK } from "constants/chartCommons";
export const OPTIONS: Highcharts.Options = {
chart: {
className: "IndividualPositioningChart",
type: "scatter",
spacing: [0, 0, 0, 0],
},
credits: {
text: WATERMARK,
href: "#",
position: {
align: "left",
},
style: {
fontSize: "8px",
},
},
title: {
text: undefined,
},
xAxis: {
startOnTick: false,
lineWidth: 0,
tickColor: "transparent",
gridLineColor: "transparent",
labels: {
enabled: false,
},
},
yAxis: {
gridLineColor: "transparent",
labels: {
enabled: false,
},
},
legend: {
verticalAlign: "bottom",
itemWidth: 150,
margin: 20,
},
tooltip: {
snap: 1,
enabled: true,
backgroundColor: "black",
borderWidth: 0,
borderRadius: 2,
padding: 4,
shadow: false,
useHTML: true,
style: {
color: "white",
fontSize: "11px",
},
headerFormat: undefined,
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
y: 13,
x: 8,
align: "left",
useHTML: true,
padding: 5,
style: {
fontWeight: "normal",
fontSize: "14px",
color: "#515151",
width: 250,
},
},
stickyTracking: false,
},
},
series: [],
};
Finnaly, I solved my problem removing the load event from the useEffect hook. The load event is declared now in the chart config file and passed as a parameter to the getOption function.
It looks like this:
export const getOption = (load: Highcharts.ChartLoadCallbackFunction): Highcharts.Options => {
return {
chart: {
className: "TeamCompetitiveChart",
spacing: [0, 0, 0, 0],
type: "scatter",
},
credits: {
text: WATERMARK,
href: "#",
position: {
align: "left",
},
style: {
fontSize: "8px",
},
},
title: {
text: undefined,
},
xAxis: {
title: undefined,
startOnTick: false,
lineWidth: 0,
tickColor: "transparent",
gridLineColor: "transparent",
labels: {
enabled: false,
},
},
yAxis: {
title: undefined,
gridLineColor: "transparent",
labels: {
enabled: false,
},
},
legend: {
verticalAlign: "bottom",
itemWidth: 150,
margin: 20,
},
tooltip: {
enabled: false,
},
plotOptions: {
series: {
marker: {
radius: 8,
},
dataLabels: {
enabled: true,
y: 13,
x: 8,
align: "left",
useHTML: true,
padding: 5,
style: {
fontWeight: "normal",
fontSize: "14px",
color: "#515151",
width: 250,
},
},
stickyTracking: false,
point: {
events: {
click: undefined,
},
},
},
},
series: [],
exporting: {
chartOptions: {
chart: {
events: {
load,
},
},
},
},
};
};
...and this in the hook:
const chartAxesTitles = useRef<IChartAxisTitle[]>([]);
const chartRef = useRef<IRefObjectForHighchartsReact>(null);
const load: Highcharts.ChartLoadCallbackFunction = function (this: Highcharts.Chart) {
chartAxesTitles.current.forEach((element: IChartAxisTitle) => {
const { args, attr, css } = element.svg.userOptions;
// Use updated x and y positions
const newArgs = [args[0], element.svg.x, element.svg.y];
createLabel(this.renderer, { args: newArgs, attr, css });
renderWatermarkLabels(this, true);
});
};
const [chartOptions, setChartOptions] = useState<Highcharts.Options>(getOption(load));
const { renderWatermarkLabels } = useRenderWatermarkLabels(chartData);
URL OF THE GIF OF THE ISSUE -> https://gfycat.com/selfishpitifuldunnart
As you can see in the image mouse pointer which is the black dot is far away from the crosshair/tooltip, I have tried all possible options I am aware of even tried updating library from V6.0.4 to V8.1.2 but couldn't get it to work. Any help appreciated. Thanks. Below is the code I am using to initialize the chart with.
var avgTempChartingOptions = {
chart: {
type: 'spline',
renderTo: 'avgTemperatureChartPanelChart',
backgroundColor: 'rgba(255, 255, 255, 0.0)',
zoomType: 'xy',
panning: true,
panKey: 'shift',
mapNavigation: {
enableMouseWheelZoom: true
},
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
title: {
text: 'Date'
},
labels: {
enabled: false
},
events: {
setExtremes: syncExtremes
},
},
yAxis: {
lineWidth: 1,
lineColor: '#ccd6eb',
},
boost: {
useGPUTranslations: true
},
tooltip: {
shared: true,
crosshairs: true,
followPointer: false,
// positioner: function() {
// return {
// x: this.chart.chartWidth - this.label.width, // right aligned
// y: -1 // align to title
// };
// },
},
plotOptions: {
scatter: {
tooltip: {
followPointer: true
}
},
spline: {
marker: {
enabled: false
}
},
series: {
// stacking: 'normal',
// cursor: pointer,
animation: true,
enableMouseTracking: true,
boostThreshold: 100 // number of points in one series, when reaching this number, boost.js module will be used
}
},
exporting: {
sourceWidth: 1200,
sourceHeight: 800,
},
series: []
};
i made a bar stacked chart using highcharts and i want the legend to be on top, i used the attribute verticalAlign with the value top but it didn't work !
here is my jsfiddle http://jsfiddle.net/rchod/sbtt6/
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
legend: {
align: 'right',
verticalAlign: 'top',
x: 0,
y: 100
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
labels: {
enabled: false
},
categories: ['']
},
yAxis: {
labels: {
enabled: true
},
min: 0,
title: {
text: ''
}
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
minPointLength: 3,
dataLabels: {
color: 'white',
align: 'center',
enabled: true,
format: '{y} %'
},
stacking: 'percent'
},
bar: {
events: {
legendItemClick: function () {
vote(1,this.userOptions.id);
return false;
}
}
,
showInLegend: true
}
},
series: [
{
name: 'yes',
data: [{ y : 73.91, id : '1' }],
id: '1'
},
{
name: 'no',
data: [{ y : 26.09, id : '2' }],
id: '2'
},
]
});
});
You have the legend property twice in your options. The 2nd one is overriding the first. Put them together:
legend: {
backgroundColor: '#FFFFFF',
reversed: true,
align: 'right',
verticalAlign: 'top',
x: 0,
y: 100
},
Updated fiddle.
I want to build a lightweight dashboard with Highcharts. First, look at this graphic http://jsfiddle.net/jerryvermanen/Zr7zE/.
I want to make a dashboard with this visualization. When clicking on a point, I want to display additional information below the visualisation. For instance, I want to show a picture (.jpg), some more information about this point and a URL to the specific source.
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
exporting: {
enabled: false
},
chart: {
renderTo: 'container',
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'DAYS BETWEEN RELEASE AND CEREMONY',
style: {
fontSize: '22px'
}
},
subtitle: {
text: ''
},
xAxis: {
min: 0,
reversed: true,
title: {
enabled: true,
text: 'Days difference'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true,
plotLines: [{
color: 'black',
dashStyle: 'longdashdot',
width: 1,
value: 365,
label: {
text: 'ONE YEAR',
y: 580,
rotation: 0,
textAlign: 'left',
}
}]
},
yAxis: {
min: 1929,
max: 2012,
title: {
text: 'Year'
},
labels: {
formatter: function() {
return this.value;
}
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
'In<b>'+this.y +'</b>this movie was released<br/><b>'+ this.x +'</b>days from the ceremony.';
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
scatter: {
marker: {
radius: 4,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
}
},
series: [{
name: 'Nominees',
marker: {
symbol: 'circle'
},
Can anyone help me out with this project?
You can bind a click event to the point using the following code.
plotOptions: {
scatter: {
point: {
events: {
click: function() {
// do what you want
// you can get the point reference using `this`
}
}
}
}
}
demo