Develop Reference

apexchart width overflows or doesn't strech

I'm using apexcharts with vue. I want the sparkline graph to take 100% of the width of it's parent.
So this is what I did:
<div>
<apexchart
:options="chartOptions"
:series="series"
height="150"
style="width: 100%"
/>
</div>
I tried also to set the width as a prop of the component but it behaves the same.
Here are my chart options:
chartOptions: {
chart: {
type: 'area',
sparkline: {
enabled: true
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight',
width: 3,
},
xaxis: {
type: 'datetime',
}
}
So nothing special here, it is copied from apex dashboard example, the only thing I've added is trying to set the width 100%.
It overflows it's parent (green) and the parent's container (yellow) as shown here:
But also when I resize the window(without refresh) it doesn't retain its size, it becomes smaller than the parent:
How can I make it fill the width of it's parent (green container) and keep it that way (responsive)?
Thanks

I had the same issue, I just removed display: flex on the container and that resolved the issue :)

I figured out that the gap after resizing is due to missing data in the series and the fact that I have set a max attribute for the x axis.
So that solved issue #2.
Apparently the charts render before it should, so it doesn't get the right parent's width,
a workaround that solved it for me was to not render the chart after the component is mounted.

you can do
xaxis: {
tickPlacement: "between",
},
by defalut it is "On",
it just places you data in between so you can see a little space on left & right end of the x axis.

chart: {
width: '100%'
}
this might fix your issue
my issue resolved using this method ref

How to set fixed width for labels in chartjs

I have one dataset with multiple labels in my bar chart. When bar chart has more labels, width of label shrink for each.
I want to set fixed width for every window in my chart. For example dark stick for every label should be same fixed width size no matter how many window exists.
Thank in advance.

Is it a request to have the vertical axis have a fixed width?
There is a way to do this:
options: {
scales: {
yAxes: [{
afterFit: function(scaleInstance) {
scaleInstance.width = 100; // sets the width to 100px
}
}]
}
}

Alignment issue in High chart's bar chart

I am creating this bar chart using high charts. The alignment of the bar is not in the middle of section(like first red bar is not in middle of the Jan, 2016). Is there any option to place all bars in middle of each sections?

I found the solution for the issue.
plotOptions: {
column: {
pointPadding: 0.5,
borderWidth: 2 ,
groupPadding: .5
}
}

Reduce space between ticks in horizontal bar-chart chartJS

I am using the horizontal bar chart from chartjs. Right now my Chart seems to be very big, and the space between the ticks on the xAxis is very high. ( I attached picture of that), can anyone tell me how to reduce this space and scale the chart in total better?
My css properties:
#myChart {
width: 90% !important;
height: 100% !important;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
padding-bottom: 5%;
}
My chart options:
modelChart = new Chart(ctx, {
type: 'horizontalBar',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
suggestedMin: 0,
fontSize: 18
}
}],
xAxes: [{
ticks: {
autoSkip: false,
fontSize: 18,
beginAtZero: true
}
}]
},
legend: {
display: false
},
tooltips: {
footerFontSize: 22,
bodyFontSize: 22,
titleFontSize: 18
},
hover: {
animationDuration: 0
}
}
});

If you post your corresponding HTML then I can confirm this, but is #myChart the id of your canvas element or of a div that contains your canvas element?
Chart.js will render the chart such that it fully fills the parent of the canvas element. Even if you set a width property on a canvas element it will still not affect the chart size.
Checkout this codepen example that demonstrates the difference. At the top is a chart contained by a div whose width is set to 40%. At the bottom is the same chart but the canvas element's width is set to 40%. Notice that the second chart still fills the entire window.
So long story short, you should wrap your canvas element in a div and set the div's desired size accordingly to actually change the size of your chart.
Now, let me address your question about changing the space between ticks in your X axis. There is not really a way to truly do this like I think you are wanting to do, because chart.js determines the tick placement by dividing the width of the chart by the number of tick steps (e.g. it always uses the full width of the chart equally).
So one way to decrease the space between ticks is to simply add more ticks (by changing the tick stepSize using the stepSize and fixedStepSize properties). Obviously, in this case, the chart size has not changed. You are just showing more ticks, so the space between them has decreased.
If you want to truly change the distance between ticks, then the only way is to decrease the width of the chart. But by default, the height of the chart will decrease along with the width because the maintainAspectRatio property is defaulted to true.
So if you want a narrower chart (but still want the chart to be large) then I would advise you to set the maintainAspectRatio property to false and manually set the height and width of your chart's parent div.
Checkout this codepen that gives an example of each of the tick spacing concepts that I discussed.
The first chart is the baseline, the second chart adds more ticks (thus decreasing the tick spacing), and the third chart changes the aspect ratio so the chart is still large but narrower (therefore the distance between ticks is reduced).

Try using chartArea: {width: '30%'}. Adjust percentage as per requirement. It will compress the width of the chart. Just a thought !!!! I used in horizontal bar graphs to adjust my graph size.

Highcharts columns - fixed border width, remove spacing between the bars

TL;DR Q: How do I force the fixed width of bar's border in Highstocks?
I need to display a histogram using Highcharts. I'd like to look it like this:
that is, no spaces between the bars, and the fixed width border.
Now I've tried to do the same with Highcharts, but it seems that some of the bars overlap each other, and the border width is not constant:
Here are the (significant) config options:
plotOptions: {
series : {
pointPadding : 0,
groupPadding : 0,
shadow : false,
borderWidth : 1,
borderColor : 'black'
}
}
What am I doing wrong?

The problem is not the gridLineWidth. You've set that correctly.
In addition you need to set the minorGridLineWidth that you have to set to 0
similar demo:
http://jsfiddle.net/P2Mv2/1/