Set Global Config on Angular Charts Not Working - angularjs

I am trying to set ticks on the xAxis to begin at zero as a Global configuration option for Angular Charts and it doesn't seem to be setting the option:
.config(['ChartJsProvider', function (ChartJsProvider) {
ChartJsProvider.setOptions( {
options: {
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}])
Now I heard there might be a bug as well, so I tried this:
.config(['ChartJsProvider', function (ChartJsProvider) {
ChartJsProvider.setOptions("global", {
options: {
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}])


The way you setting beginAtzero property its wrong. Because when you configure global setting for chart scale, there is no option for setting it for xAxes or yAxes.
Try the below code for setting beginAtZero
ChartJsProvider.setOptions({
scale : {
ticks : {
beginAtZero : true
}
}
});

Related

Highcharts React with Typescript Event Typing

Highcharts Event with TypeScript
I am using custom events in my Highcharts together with the React wrapper.
As an example it toggles the legend when opening and closing the full screen.
const options: Highcharts.Options = {
chart: {
events: {
fullscreenOpen: function (this: any) {
this.update({
legend: {
enabled: true,
},
});
},
fullscreenClose: function (this: any) {
this.update({
legend: {
enabled: false,
},
});
},
},
},
};
Correct typing?
How can I type the event correctly and can get rid of the this: any?
Code & Demo
Stackblitz Code
Stackblitz Demo

You can check types in Highcharts API. In your case it will be:
chart: {
events: {
fullscreenOpen: function (this: Highcharts.Chart) {
this.update({
legend: {
enabled: true
}
});
},
fullscreenClose: function (this: Highcharts.Chart) {
this.update({
legend: {
enabled: false
}
});
},
},
}
Live demo: https://stackblitz.com/edit/react-starter-typescript-nv7acw?file=App.tsx
API Reference:
https://api.highcharts.com/highcharts/chart.events.fullscreenOpen
https://api.highcharts.com/class-reference/Highcharts#.FullScreenfullscreenOpenCallbackFunction

High charts / Stacked Bar - Legends Disable hover

We have implemented high chart - Stacked bar as below -
const options = {
chart: {
….
},
title: {
text: ''
},
xAxis: {
visible: false,
categories: ['']
},
credits: {
enabled: false
},
yAxis: {
visible: false,
…….
},
legend: {
itemStyle: {
cursor: 'default',
fontWeight: 'normal'
},
reversed: true
},
plotOptions: {
series: {
cursor: 'default',
stacking: 'normal',
enableMouseTracking: false,
events: {
legendItemClick: function () {
return false;
}
},
states: {
hover: {
enabled: false
}
}
}
},
tooltip: {
useHTML: true,
enabled: false,
outside: true,
followPointer: true,
crosshairs: false,
},
accessibility: {
…….
},
exporting: {
enabled: false
},
series: props.series
};
It loads fine, also hovering on any of the block does not change opacity for other blocks.
How can we disable hovering on legends below stacked bar?
Example - http://jsfiddle.net/clockworked247/FGmgC/
In above link, basically hover effect on John, Joe, Jane, Janet legends need to be disabled.

Thanks all.
Below answer helped, and worked.
Above link should help. If you are looking for more solutions you can also achieve it using CSS. Make pointer event none for legends like .highcharts-legend-item:{ pointer-events:none; }

hide xAxes labels from Bar chart with 'react-chartjs-2'

I have built a graph of bar chart with some data.
the current result I have is:
and what I want is to delete the names below the xAxes in the bar chart.
I viewed the react-chartjs-2 documentation and tried to change the options, also viewed Chart.Js documentation.
this is my options right now:
const options = {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
xAxes: [
{
scaleLabel: {
display: false,
},
gridLines: {
display: false,
},
},
],
},
};

after a deep search I found the solution:
const options = {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
xAxes: {
ticks: {
display: false,
},
},
},
The problem is in xAxes it was a list instead of object.
after the fix, this is how it looks:

save chart button of stock tool chart not working in highcharts

On clicking save charts button of stock tool chart nothing happens. How does it work?
This is my chart config
this.trendChart.update({
series: {
showInNavigator: true,
dataGrouping: {
approximation: "average"
}
}
},
series: [{
id: 'series1',
}],
chart: {
spacingRight: 35
},
exporting: {
enabled: true,
buttons: {
contextButton: {
x: 0
}
}
},
stockTools: {
gui: {
enabled: true
}
},
});
Any config change I need to do?

The button save a chart in localStorage under highcharts-chart key. You can for example use it to keep some drawn annotations after refresing a browser.
The following items are stored:
annotations
indicators (with yAxes)
flags
You can get the options in the following way:
const savedOptions = localStorage.getItem(['highcharts-chart']);
Live demo: https://jsfiddle.net/BlackLabel/u6Lte04d/
API Reference: https://api.highcharts.com/class-reference/Highcharts#.merge%3CT%3E

ApexCharts don't showing toolbar

I'm using ApexCharts with React and i'm using a line's chart and it's not showing the toolbar, someone can help me?
My summed up state of options:
const [propriedades, setPropriedades] = useState({
options: {
chart: {
height: 150,
type: 'line',
selection: {
enabled: true
},
toolbar: {
tools: {
zoomin: true,
zoomout: true,
}
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
}
},
});

xaxis: {tickPlacement: "on"},
For Angular it was solved by adding this line

Resources