My fiddle: https://jsfiddle.net/xuhang1128/uynsnryr/9/.
even I set below parameter to VictoryBar, it still not work. thanks.
style={{
data: {
strokeWidth: 15
}
}}
just use width instead if strokeWidth =)
Related
I'm trying to resize the range selector. i'm able to change button sizes but they are coming close to each other. how can i increase the font size without increasing the space between buttons. Thanks in advance.
You can control the rangeSelector buttons by buttonSpacing and buttonTheme options. Setting a fixed width should be enough in your case:
rangeSelector: {
buttonSpacing: 5,
buttonTheme: {
width: 30,
style: {
fontSize: 16
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/5f6aro7t/
API Reference: https://api.highcharts.com/highstock/rangeSelector.buttonSpacing
I'm using VictoryCharts, specifically the VictoryLegend component to render the legend for my chart. According to the docs it sounds like the only options for positioning the legend are absolute x and y coordinates. I'm trying to position the legend relatively, for example "at the bottom in the middle". This is the desired appearance:
Because the series labels in my legend are internationalized, the number of characters and thus the legend's width changes based on locale, so it isn't an option to hard-code an x coordinate to center the legend. I would also prefer not to have to calculate the y coordinate based on the height of my chart. Is there any way to relatively position the VictoryLegend below the chart and horizontally centered?
According to the maintainer in a Gitter conversation, it appears this is not possible:
This is possible, but there's nothing entirely built-in with Victory charts to do it. The library has an amazing amount of flexibility but a terrible dearth of sensible defaults.
To begin, you first have to backfill basic chart responsiveness as outlined here:
https://github.com/FormidableLabs/victory/issues/396#issuecomment-773791721
Then you can use the same boundingRect width/height to position the legend as well:
https://codesandbox.io/s/loving-fog-f3ed9d?file=/index.js
Or the relevant code pieces here:
const Chart = () => {
//NOTE victory charts don't automatically resize width 🤦♂️ yet - https://github.com/FormidableLabs/victory/issues/396
const [boundingRect, setBoundingRect] = useState({ width: 0, height: 0 });
const containerRef = useCallback((node) => {
if (node !== null) {
setBoundingRect(node.getBoundingClientRect());
}
}, []);
//...
return (
<div ref={containerRef} style={{ width: "90vw", height: "90vh" }}>
<VictoryChart
domainPadding={30}
theme={VictoryTheme.material}
height={boundingRect.width * 0.9}
width={boundingRect.width}
>
<VictoryBar
data={chartData}
cornerRadius={2}
style={{ data: { fill: ({ datum }) => datum.fill } }}
/>
<VictoryLegend
data={legendData}
centerTitle
gutter={20}
itemsPerRow={2}
orientation="horizontal"
rowGutter={{ top: 0, bottom: -10 }}
style={{ title: { fontSize: 20 } }}
titleOrientation="bottom"
x={50}
y={boundingRect.width * 0.81}
/>
</VictoryChart>
</div>
);
};
I need to draw a bar chart and need to set width and height for the container div (as there is only that amount of space I can use)
However, when I set height and width, in some cases, highchart will not draw some of the bar labels, even though I think there are places to draw them. Can someone explain this or maybe provide a workaround (without removing height)?
The jsfiddle is http://jsfiddle.net/daxu/md2zk/68/
labels: {
style: {
color: 'black',
fontFamily: 'DINPro',
fontSize: '7.8409px',
fontWeight: 'normal'
},
formatter: function () {
return this.value;
}
}
At the beginning, remove datalabels configuration per each point and use common options. There, you can disable hiding labels by crop option.
Example: http://jsfiddle.net/md2zk/70/
I am trying to make the vertical labels in HighCharts to span multiple lines instead of taking up a lot of height. I have tried several different approaches, but none seems to work.
I have tried:
labels: {
style: { width: '100px', height: '100px' }
}
I have also tried by setting useHTML to true and then using the formatter to display the label as a div. Then I sat a fixed width and height, but event this didn't work.
Fiddle showing the issue:
http://jsfiddle.net/4Q9xE/
Any help/tips will be appreciated. Thanks.
You can do this, but it will look bad. Use something like this:
labels: {
rotation: -90,
formatter: function () {
return this.value.replace(/ /g, '<br />');
}
},
DEMO
Well, for me useHTML + width works fine, for example: http://jsfiddle.net/4Q9xE/2/
labels: {
rotation: -90,
useHTML: true,
style: {
width: 100 // or '100px'
}
}
Note: It won't work for exported chart.
Image 1
Image 2
I want to align left the label but when i do this, the label a stack on other like Image 2.
Please help me
This one works without fixed width:
.highcharts-axis-labels span {
left: 0 !important;
}
Since it uses the width of the biggest label and moves the smaller once by raising the "left" value, you can prevent that by setting it fix to 0. So no need of fix width or "align: left".
Update:
Labels "useHTML" setting must be set to true to work!
xAxis: {
labels: {
useHTML: true,
You can also set useHTML as true, use formatter for labels and then use CSS styles.
http://api.highcharts.com/highcharts#xAxis.labels.useHTML
http://api.highcharts.com/highcharts#xAxis.labels.formatter
EDIT:
http://jsfiddle.net/2QREQ/3/
xAxis: {
labels: {
//align: 'center'
useHTML:true,
formatter:function(){
return '<div class="label">'+this.value+'</div>';
}
}
},
CSS
.label {
text-align:left;
width:60px;
}
Give the green and the blue bar a container div/span. Then apply for both of the label and the container span/div a 'display: inline-block' css.
By doing so you would force the bars to 'give space' for the label.