I am using Highcharts box plot is there a way to show data points in highcharts as below
Where data point will give some addition info on the third parameter.
Please point to sample if this exists in highchart
I think that the boxplot series should fill your requirements.
Demo: https://www.highcharts.com/demo/box-plot
Related
I have combination chart as displayed in the fiddle using highcharts
https://jsfiddle.net/u1p2ebk0/3/
but while displaying September month plots are not showing the custom icons on the chart really not sure why is this behavior and also when i click no 1m zoom custom icons are showing but on load also it should show the icons not sure what i am missing
All flags are not displayed because there is no place for them all. When you set series.flags.allowOverlapX property to true, all flags will be shown but they will overlap each other. You can try to reduce their size or alternatively modify the amount of setting data depending on rangeSelector selection or chart size.
Let me know in case of any implementation issues.
Demo:
https://jsfiddle.net/BlackLabel/rk95uL10/
API reference:
https://api.highcharts.com/highstock/series.flags.allowOverlapX
if I have the same point for two plots in a line chart of zingchart js when I hover on that point I got only a single plot value other is getting hidden
behind one
If active areas for tooltips overlap perfectly, only one value will show. crosshair-x is the only tool which shows all values as you can see in this demo
I wanted to create a chart to display info/days. Where I wanted to display text onY-axis. I have created line using React.js. Currently I am able to display digit on Y-axis. However, is there a way to display string(text) on Y-axis?
In the link, the picture of the expamle what i want to do.
my expamle
I've spent a lot of time trying to implement chartjs to my project. But i had a lot of problems with customizations. As a result i've replaced chart library to victory And it will suite for all your cases. I recommend you to try it and don't waste your time on chartjs
I'm working on an AngularJS 1.5.3 project , and I use Angular-nvd3(1.0.7). I have met 2 problems:
1,When I'm using a discreteBarChart , I need to assign different color to every column,like this:(seems the picture can't display , you can imaging it , it's a simple chart like http://krispo.github.io/angular-nvd3/#/discreteBarChart)
and I didn't find any place, to let me add a group of color .so I want to know how to add different colors to each column.
and the second question is , I need to use a multi Chart , like this:http://krispo.github.io/angular-nvd3/#/multiChart . don't need so complex like the link. just need a pair of histogram . but I don't know the data's right structure.and it's not in the documentation. so I hope someone can help me with those 2 promblems.
Answer to your First Query :
You can set a different color for each bar in your discrete Bar Graph Chart in Multiple ways:
1. First Approach:
Configure your $scope.options object which you provide to nvd3 directive and provide a list of color code you want for your bars. You can provide a color name, Hex Code of Color or RGB Code of Color.
View This Plunkr for a working demo of the first approach. Please see plunkr before reading the explanation.
You can see in this demo that colors are provided as a list in $scope.options object. The first color is provided as the color name i.e red, the second color is provided as RGB Code and rest all colors are provided as Hex Code. You can provide any number of colors in the list.
Here, you should note: If there are more number of bars in your graph then the number of colors then colors for bar will start repeating in the same order in which you provided in list.
2. Second Approach:
View This Plunkr for working demo of the second approach. Please see plunkr before reading the explanation.
In the second approach, the color is provided with $scope.data object which you provide to nvd3 directive and we made necessary changes to the $scope.options configuration object.
Here in the $scope.options object the color field is set to a function which returns color field of individual objects of $scope.data array i.e 'purple' for first, rgb(10,20,30) for second, etc..
Hope this helps!!
Will back get soon with the solution for your second problem.
Hello how can I remove a series from a chart, I know that I can get the series object using getAt(0) or getAt(1) depending on how many serieses I got in my chart.
my question is how can I remove a series from the chart.
main reason is that I give the end user the ability to change the series type: bar, line... so I wan to display the new change at run time by removing the series and adding a new one.
I tried Chart.series.removeAt(0); It removes the legend but the bar or the line still shown !!
I use extjs 4.1.1
thank you,
I had to do the same thing and give end users the ability to change the chart type at run time to give different visualizations of data. I found that there is more involved in the chart type (bar, line, pie) then just the series. In other words to achieve this, I wasn't able to just substitute a different series type for the data and add it to the chart.
I ended up creating a different config for each different type of chart using the same datastore. The chart was contained by an Ext.panel.Panel which I added this function to:
// toggle format between pie chart and bar chart
this.toggleFormat = function() {
var chart = me.down('chart');
this.remove(chart);
if (chart.chartType == 'pie') {
this.add(Ext.create('Ext.chart.Chart', bar));
} else {
this.add(Ext.create('Ext.chart.Chart', pie));
}
};
The bar variable holds a bar chart config and pie holds a pie chart config but both had the same datastore attached to their store: configs.
When the user pressed the format button I called this function to remove the chart from the panel and create one with the different format. It achieved the desired effect.