I am using HighCharts engine to draw some stock-charts. Currently i use candlesticks and managed to change the candles time period by changing plotOptions.dataGrouping settings which are defined in react state:
chageDataGrouping(){
this.setState((prevState)=>({
options:{
...prevState.options,
plotOptions:{
...prevState.options.plotOptions,
series:{
dataGrouping : {
//setting data grouping value to show each candle as a summary of 2 weeks candles
units: [['week', [1] ] ]
},
forced : true,
enabled : true,
}
}
}
}
}))
The above code works fine. The Problem is this : if there is an indicator present in the chart, changing the data-grouping setting in plotOptions, makes the indicators disapear. By the way i am changing data grouping manually as user clicks on a button to select 'week','month',etc view.
Since i am using react and setting up chart options in react.state, it feels like i am some how re-redering the chart which makes the indicators disappear.
Any ideas? tnx.
Related
I'm using Highcharts to create a negative-stack according to its document. My language is Persian (Farsi) so I'm using RTL direction overall the project. My problem doesn't limit to negative-stack type, but all charts with xAxis & yAxis.When I open the index.html file at first I'll face with axis labels overlap the chart as you see in the attached image-1, but after a refresh, it will be aligned properly according to the attached image-2.
Attachments:
image-1
image-2
👉 Sample CodeSandBox Link 👈
Looks like it's caused by the fontFamily.
After changing that property, everything works as expected.
chart: {
style: {
fontFamily: "iranyekan"
}
},
Live demo: https://codesandbox.io/s/upbeat-sun-me5m8
Im trying to create a vertical solid gauge chart with highcharts. It should be really simple, just like a solid gauge but as a vertical bar.
For doing so, I am creating a new series type and extending it from the column chart.
If I set all the options for columns, e.g. hiding the Y Axis labels, hiding the X axis labels, etc. it works more or less like I want to. But, as I am wrapping this into a plugin, I don't think it make sense that the user who defines a chart as a lineargauge should have to worry about setting this informations right. Thus, I need a way to set some default properties to my custom series and I cant find the way to do it.
I have tried wrapping the render and drawGraph function. I have tried setting it on the overriden draw functions of my chart. None of these worked.
You can check my progress on this fiddle: http://jsfiddle.net/w8ou4byv/1/
What I want, for instance, is that the user of my plugin should not have to set:
//...
yAxis: {
labels: { enabled: false },
}
It should be the default value (although it is not the default for the column chart that I am inheriting from).
Thanks!
You use Highcharts.extendClass for creating a new series type. Highcharts provides a dedicated function for this called seriesType: https://api.highcharts.com/class-reference/Highcharts#seriesType
seriesType accepts default options of a new series as an argument - that's the solution for your problem.
Chart.js 2.0 line chart
I need to only show the hover state on the current point, not on the entire data set.
Chart.js documentation has this example,
This is what my chart looks like when I hover on a single point.
Thank you.
Found the answer. When creating the chart you can specify it in the options.
options: {
hover: {
mode: 'single'
}
}
I am trying to use High Stock Chart but rather than showing a line graph in it I want to show bar graph is there a possibility to do same
JS Fiddle
My end requirement is to make a graph like this
Will it involve some additional CSS
I need to show time slider at bottom as mentioned in screenshot
On Change of time interval on slider my graph will change
Please suggest on same.
After playing around with the chart I found the following solution which can be seen in the demo below:
$('#container').highcharts('StockChart', {
chart: {
type: 'column'
},
rangeSelector: {
allButtonsEnabled: true,
selected: 2
},
JSFIDDLE DEMO
The formatting is not the same as your end result but you should be able to play with the styling and ranges to make it work.
When using Highcharts (v.3.0.5), I have multiple Y Axis displayed in the same chart. Using the legend, a user can choose to hide or show any of the Y Axis as they want. All this is built in feature of the Highcharts javascript library. However, when a Y Axis is hidden, its Title still appears visible in the Chart. I would like to hide it when the rest of the Y Axis is hidden. Surprised this is not the default behaviour already. Does anyone know how to do that?
The behaviour can be seen by looking at the example provided on Highcharts examples page:
http://www.highcharts.com/demo/combo-multi-axes
If you hide the "rainfall" axis for example, the title remains in the chart as "Rainfall".
I found this post (several years old) where the exact same question was asked. However, the solution proposed does not work. The show and hide events, redisplay everything.
http://forum.highcharts.com/highcharts-usage/how-to-hide-y-axis-title-multiple-axis-t6973/#p32842
This actually turns out to be a much sought after question/answer. Since Highcharts V2.2, it is possible to assign "showEmpty: false" to y axis definitions and this will ensure that when hidden, the Y-axis text label is also hidden. Example snippet of config below:
yAxis: [{
min: 0,
showEmpty: false,
labels: {
formatter: function() {
return this.value;
},
style: {
color: '#3366CC'
}
},
title: {
text: 'Clicks',
style: {
color: '#3366CC'
}
},
id: 'Clicks'
},
...
I have read reports where this showEnabled = false breaks if both min and max are also set. In the case above, where only min is set, it worked well for me using Highcharts V3.0.5
you can use yAxis.setTitle() and set/remove the title when needed.
here is the api documentation link
#arcseldon, it is true that showEnabled = false breaks if both min and max are also set. A possible workaround in this case is to set floor and max instead