Develop Reference

Too many categories to display on column chart with vue-apexchart

i have a big data set to display ( around 150 category) with a library named vue-apexchart my problem is that i cant find a way to make the graph scrollable on xaxis without having a broken display the following image will explain my problem better
as you can see having too many categories leads to an unreadable chart
can you please help me
i have tried to make a scrollable div, the probleme still remains ( unreadable xaxis )
here's my chartOptions object :
chartOptions: {
chart: {
type: "bar",
height: 350,
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: "55%",
endingShape: "rounded",
},
},
dataLabels: {
enabled: false,
},
stroke: {
show: true,
width: 2,
colors: ["transparent"],
},
xaxis: {
categories: [],
},
fill: {
opacity: 1,
},
},

I think there are two strategies that you could adopt here. In my opinion, the second one is better.
1. Horizontal bar chart
If you do not have strict constraints in terms of UX/UI, a possible solution might be to switch both axes...
plotOptions: {
bar: {
horizontal: true
}
},
... and give your chart much more height:
chart: {
type: 'bar',
height: 2500,
},
Doing that would allow you to use the natural vertical scrolling of your browser.
let data = [];
for (let i = 1; i <= 150; i++) {
data.push({x: `Category ${i}`, y: i});
}
let options = {
series: [{
name: 'Series',
data
}],
chart: {
type: 'bar',
height: 2500
},
yaxis: {
labels: {
style: {
fontSize: '10px'
},
offsetY: 3
}
},
plotOptions: {
bar: {
horizontal: true
}
},
dataLabels: {
enabled: false
}
};
let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
All categories are visible. This is not very handy, though.
2. Zoom, pan and tick settings
Zooming and panning are useful features. They are available by default in the toolbar, but this toolbar does not appear immediately when your xaxis has categories. To enable the toolbar in this case, you have to change xaxis.tickPlacement from 'between' to 'on' (see Zoom on Category Bar Charts – ApexCharts.js).
Since you have a lot of categories, it is also a good idea to limit the number of visible labels with xaxis.tickAmount.
xaxis: {
tickPlacement: 'on',
tickAmount: 25
},
Thanks to the zoomX() method, you can decide to display your chart with only a subset of your data. The rest is still accessible via zooming and/or panning.
let data = [];
for (let i = 1; i <= 150; i++) {
data.push({x: `Category ${i}`, y: i});
}
let options = {
series: [{
name: 'Series',
data
}],
chart: {
type: 'bar',
height: 350
},
xaxis: {
tickPlacement: 'on',
tickAmount: 25
},
dataLabels: {
enabled: false
}
};
let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();
chart.zoomX(37, 71);
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>

How to scroll in x-axis in react-chartsjs-2

I have implemented a bar chart in react.js and I want to figure out how I can scroll in x-axis when the values are more and more. In below chart I have some search values that user do in a day. Until now I have 100+ days and I think my problem will be bigger until we reach the end of the year when I will have more values in x-axis.
My code for the chart and the options are below.
const options = {
responsive: true,
plugins: {
title: {
display: true,
},
},
};
const dataForSearchBins = {
labels,
datasets: [
{
label: "Number of searches",
data: searchBins?.map((item) => item.value),
backgroundColor: "lightBlue",
},
],
};
<Stack>
<Text style={{ textAlign: "center" }}>{`Number of clicks per ${binSize.toLowerCase()}`}</Text>
<Bar options={options} data={data} />
<Box mb={6} />
</Stack>

You can use chartjs-plugin-zoom for this.
import zoomPlugin from 'chartjs-plugin-zoom';
import { Chart as ChartJS} from 'chart.js';
ChartJS.register(zoomPlugin);
After registering zoom plugin, modify the options object.
const options = {
responsive: true,
plugins: {
title: {
display: true,
},
zoom: {
pan: {
enabled: true,
mode: 'x'
},
zoom: {
pinch: {
enabled: true // Enable pinch zooming
},
wheel: {
enabled: true // Enable wheel zooming
},
mode: 'x',
}
}
},
};

Highstock Charts React: Generating chart with multiple series is displayed incorrectly

I'm trying to create a Component that wraps a Highstock chart.
It takes charts and chartHeight as props, and I'm generating the chart options like so:
setChartOptions({
chart: {
height: (props.charts.length) * props.chartHeight,
},
credits: {
enabled: false
},
title: {
text: 'Title'
},
rangeSelector: {
selected: 0,
buttons: [],
inputEnabled: false
},
tooltip: {
split: true
},
series: buildSeries(),
yAxis: buildYAxis()
})
I'm using the functions buildSeries and buildYAxis:
const buildSeries = () => {
let series = [];
props.charts.forEach((chart, index) => {
series.push({
type: chart.type,
name: chart.title,
data: chart.data,
yAxis: index,
color: chart.color
})
})
return series;
}
const buildYAxis = () => {
let yAxis = [];
props.charts.forEach((chart, index) => {
yAxis.push({
labels: {
align: 'right',
x: -3
},
title: {
text: chart.title,
},
height: props.chartHeight,
top: index * props.chartHeight,
lineWidth: 2,
resize: {
enabled: true
},
offset: 0
})
})
return yAxis;
}
But the charts are displayed incorrectly:
As the picture shows, the first chart is displayed in the very bottom (Blue) and the large gap between the Title and the chart is supposed to hold the first chart.
When I enter the return values of buildSeries and buildYAxis the chart is displayed correctly.
I used the following link as an example of a functioning chart:
https://www.highcharts.com/demo/stock/candlestick-and-volume
Am I missing something with the initialization of the options? Or is this a bug within Highstock charts?
Thank you

VueJs highstock cant draw graph properly

This is my VueJS code, i use this lib https://www.npmjs.com/package/highcharts-vue
So i dont know how i can get data and set it to series before the graph is drawn. Or if this is not posible, how can i redraw graph properly? Becouse now i set some default data, then get data from page, and redraw graph, but when its done and i see my graph, the scrollbar go to the left side and has a very small range. So how set options without change scrollbar and range selector?
<template>
<highcharts :constructor-type="'stockChart'" :options="options" :updateArgs="[true, false]" ref="linerchart"></highcharts>
</template>
<script>
import {Chart} from 'highcharts-vue'
import Highcharts from 'highcharts'
import stockInit from 'highcharts/modules/stock'
stockInit(Highcharts)
export default {
data: () => ({
obj: [],
names: ['CAFF'],
options: {
credits: { enabled: false },
rangeSelector: {
selected: 1,
inputEnabled: false,
buttonTheme: {
visibility: 'visible'
}
},
yAxis: {
labels: {
formatter: function () {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions: {
series: {
compare: 'percent',
showCheckbox: false,
events: {
checkboxClick: function (event) {
if (event.checked) {
this.show();
} else {
this.hide();
}
}
}
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> USD<br/>',
split: true
},
series: [{
name: "CAFF",
data: [1,2,3,4,5,6]
}]
}
}),
methods: {
linerGraph() {
var that = this;
this.names.forEach(function(name, i){
axios.get('/test/account/CAFF')
.then(response => {
console.log(response.data)
that.obj.push({name: name, data: response.data});
});
});
this.options.series = that.obj
},
},
components: {
highcharts: Chart
},
mounted() {
console.log(this.$refs.linerchart)
this.linerGraph();
}
}
</script>

You should use other VueJS lifecycle hook point to run axios request, because you are trying to download it when the component is already mounted(), so please try to use one of hook points before that one, e.g created().
Here is the Lifecycle diagram from Vue General Documentation:

Issues with react-chartjs-2

I have issue with react-chartjs-2 and chartjs-plugin-streaming, my goal was to create a live graph with stream, but it ends up in error and I don't quite know why. Anyhow, my imports are like this:
import { Chart, Bubble } from 'react-chartjs-2';
import ChartStream from 'chartjs-plugin-streaming';
Then right below that is this part:
Chart.pluginService.register(ChartStream);
and then theres's this part in component render
<Bubble
data={{
labels: ['demo'],
datasets: [{
backgroundColor: 'rgba(75,192,192,1)',
data: []
}]
}}
options={{
plugins: {
streaming: {
onRefresh: function(chart) {
chart.data.datasets[0].data.push({
x: Date.now(),
y: Math.random() * 100,
r: 5
});
},
delay: 500,
refresh: 1000,
frameRate: 30,
duration: 3600000 // 3600000 = 1hour
}
},
scales: {
xAxes: [{
type: 'realtime',
id: 'x-axis-0'
}]
}
}}
/>
first error that happens right on navigation is this:
Uncaught TypeError: Cannot set property 'options' of undefined
at core.controller.js:51
at Array.forEach ()
at n (core.controller.js:50)
at e.update (core.controller.js:340)
at e.construct (core.controller.js:121)
at new e (core.js:7)
at t.renderChart (index.js:228)
at t.componentDidMount (index.js:53)
at e.notifyAll (CallbackQueue.js:76)
at r.close (ReactReconcileTransaction.js:80)
because in core.controller.js of chartjs is this part:
function updateConfig(chart) {
var newOptions = chart.options;
// Update Scale(s) with options
if (newOptions.scale) {
chart.scale.options = newOptions.scale;
} else if (newOptions.scales) {
newOptions.scales.xAxes.concat(newOptions.scales.yAxes).forEach(function(scaleOptions) {
chart.scales[scaleOptions.id].options = scaleOptions;
});
}
// Tooltip
chart.tooltip._options = newOptions.tooltips;
}
the part that fails is this:
chart.scales[scaleOptions.id].options = scaleOptions;
and it's caused by these options I set before, upon debugging there is no x-axis-0 in chart.scales, only y-axis-0
scales: {
xAxes: [{
type: 'realtime',
id: 'x-axis-0'
}]
}
Anyone know how to work around this issue?

The problem seems that when a chart instance is constructed, the 'realtime' scale is not registered yet, and chart.scales['x-axis-0'] is left undefined. Please make sure the chartjs-plugin-streaming is imported before a chart is constructed.
By the way, you don't need to register the plugin object to the pluginService explicitly. It is done with import 'chartjs-plugin-streaming'. Try this working sample:
import React from 'react';
import ReactDOM from 'react-dom';
import { Bubble } from 'react-chartjs-2';
import 'chartjs-plugin-streaming';
ReactDOM.render(
<Bubble
data={{
datasets: [{
label: 'demo',
backgroundColor: 'rgba(75,192,192,1)',
data: []
}]
}}
options={{
plugins: {
streaming: {
onRefresh: function(chart) {
chart.data.datasets[0].data.push({
x: Date.now(),
y: Math.random() * 100,
r: 5
});
},
delay: 500,
refresh: 1000,
frameRate: 30,
duration: 3600000 // 3600000 = 1hour
}
},
scales: {
xAxes: [{
type: 'realtime'
}]
}
}}
/>
, document.getElementById('root'));