I am using Highcharts for one of my project. Everything is okay except I could not change line style('Solid','ShortDash','ShortDot','ShortDashDot','ShortDashDotDot','Dot','Dash','LongDash','DashDot','LongDashDot','LongDashDotDot') of bottom grid line in x axis as shown in the attached image.
Because the line you highlighted is not a gridLine of yAxis and dash style does not apply to it. In fact it covers the bottom-most grid line. Disable it by setting its width to 0.
API Reference:
http://api.highcharts.com/highcharts/xAxis.lineWidth
http://api.highcharts.com/highcharts/yAxis.gridLineDashStyle
Example:
http://jsfiddle.net/mnp6xa57/
Related
I wish to remove the end line on Highcharts (as shown in image). Wish to show the Highcharts grid open.
If the top grid line of yAxes is always the last item (highcharts-yaxis-grid > highcharts-grid-line) and the right grid line of xAxes is always before the last one (highcharts-xaxis-grid > highcharts-grid-line). You can find both grid lines and then set the stroke-width to 0px.
check this demo: https://jsfiddle.net/zypherscript/60e4asjv/5/
I have three pie charts displayed in a row. Two have two segments, one has five. All three have vertical legends.
Given that, the chart with five segments displays the pie slightly smaller, due to the extra height of the legend. It also has a slight negative vertical offset.
Is there any way I can set all three charts to render the chart in the same position? I've tried setting the center to 50%,50% in plotOptions, didn't help.
You have to set the marginBottom-Value of the chart to a value that is equal an all charts. Highcharts is trying to display the pie as big as possible, therefore it will use more space if the legend is not as big.
By setting the marginBottom you force the chart to ignore the actual legend size.
The center: ['50%','50%'] setting will only take into account the actual plot area. So if this area is decreased because of a taller legend it has no effect.
I made a jsfiddle where you can explore this settings:
http://jsfiddle.net/doc_snyder/dsmgy6ts/
I am working on an implementation of CorePlot that uses a chart with all white elements on a black view.
The chart is coming along nicely, but I cannot get my axis increment labels to be the correct color. To clarify, the labels for the axis are correct (time and usage) but the labels on the axis tick marks are still in black.
What I currently see:
Changing my view background to white to confirm that the tick labels are there:
I'd appreciate it if someone could point me in the right direction for making the tick mark labels white instead of black, as well as making the horizontal lines that go across the chart white instead of black.
Thanks in advance!
Line styles and text styles both have color properties (lineColor and color, respectively). Use the following axis properties to set the styles:
titleTextStyle: text style for the axis title
labelTextStyle: text style for the labels at the major tick locations
minorTickLabelTextStyle: text style for the labels at the minor tick locations
axisLineStyle: line style for the axis line
majorTickLineStyle: line style for the tick marks at the major tick locations
minorTickLineStyle: line style for the tick marks at the minor tick locations
majorGridLineStyle: line style for the grid lines at the major tick locations
minorGridLineStyle: line style for the grid lines at the minor tick locations
In My Code there is requirement when user click on a Bar of a series the CheckBox Style of the Series should be changed to none.But when i do that my Chart Width is increasing. IS there any way we can keep the chart width fix irrespective of legend table width.
Thanks
Akshay
This Can be done
GetLegend().SetResizeChart(false);
GetLegend().SetCustomPosition(true);
GetLegend().SetPositionUnits(muPercent);
GetLegend().SetLeftPercent(83);
GetLegend().SetTopPercent(10);
Set your legend Alignment in bottom for Avoiding width increment of chart as below.
Chart.GetLegend().SetAlignment(laBottom);
if you want custom position of legend (Right side of chart)then you can do as below.
m_Chart1.GetLegend().SetCustomPosition(TRUE);
m_Chart1.GetLegend().SetPositionUnits(muPercent);
m_Chart1.GetLegend().SetTopPercent(20);
long leftmargin = 80.0;
m_Chart1.GetLegend().SetLeftPercent(leftmargin );
m_Chart1.GetPanel().SetMarginRight(100-leftmargin+1);//for avoiding overlapping of legend and chart
Also you can finetune your legend and chart by modifying above value
This Link is a similar example from highcharts.com which i'm working on. I'm trying to place the labels for plot bands on y axis. But as you can see the labels are overlapping on the chart which isn't that good. If i wanna color the labels with the same color of the corresponding plotbands, the label doesn't show up. Is there a way to place it completely outside without overlapping?
Thanks in advance.
A possible solution is to add right margin to the chart, and move the labels over.
Add a marginRight to the chart, and on each label, use x to determine its starting x position.
marginRight:110
and
x: 90 on each label.
http://jsfiddle.net/7xb1Lgx6/ the fiddle.
I think it's not possible to do it yet.
If you add labels to the plotbands it will overlap them.
You can align your labels but if you set x more than your chart width, it will not appear on your chart.
demo