looking for help with creating a complex chart
Hello, I have a task of creating what seems to be 3 charts in one design. I am able to create the two scattered charts, but the column charts are proving to be challenging. Thanks to Wojciech Chmiel, I managed to create the column charts using highcharts-vue. However, the behavior of the chart is not quite right. I am having trouble adding a yAxis and preventing the chart from moving to the top in a responsive manner.
@Wojciech Chmiel Apologies for the delay. Check out this columnrange chart with a boxplot and 2 scatter plots.
initializeChart (data) {
this.chartOptions = merge(this.getBaseChartConfig(ChartTypes.BoxPlot), {
xAxis: {
categories: data.periods
},
series: [
{
type: 'columnrange',
name: 'Observations',
data:data.peerGroupStatisticReturns.dataRange,
showInLegend: false
},
{
type: 'boxplot',
linkedTo: ':previous',
data: data.peerGroupStatisticReturns.values
},
{
type: 'scatter',
name: data.names[1],
marker: {
symbol: 'diamond',
fillColor: '#6598FD',
radius: 6
},
data: data.benchmarkReturnSeries.data
},
{
type: 'scatter',
name: data.names[2],
marker: {
symbol: 'square',
fillColor: '#FFCC33'
},
data: data.productReturnSeries.data
}
]
})
// customize chart settings
const boxPlotConfig = {
title: {
text: ''
},
plotOptions: {
boxplot: {
fillColor: '#0076C0',
medianColor: '#303030',
medianWidth: 1,
stemWidth: 0,
whiskerWidth: 0,
color: '#303030',
showInLegend: false
},
columnrange: {
color: '#66ADD9'
},
series: {
enableMouseTracking: false,
borderColor: '#303030'
}
},
yAxis: {
title: ''
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>I've adjusted the colors to alternate and repositioned the markers to avoid overlap, placing one to the right inside the column and one to the left.
Incorporating Vue into my webpage has been a game changer, especially when utilizing eventBus to seamlessly pass data between components. Some burning questions I have are: Is passing data with eventBus between sibling components considered a bad prac ...
Typically, I integrate a JavaScript code with functions that execute on specific events. Currently, I am working with nuxt.js and I am uncertain about where to place this file or how to establish a global method for utilizing these functions across all co ...
I am trying to set up a Mocha and Chai test. Here is my class, myClass.js: export default class Myclass { constructor() {} sayhello() { return 'hello'; }; } Along with a test file, test.myclass.js: I am attempting to a ...
Let's pause and consider the scenario: You're creating a modular interface, where any module that implements it must be able to 'render itself' into the application using a slot and state. How can you achieve this in Vue? An Example S ...
Just dipping my toes into google apps script. On my to-do list is creating a script that can extract data from a table in Gmail and transfer it to Google Sheets. Here's an example of what the email body looks like: CONFIRMATION CODE GUEST&apo ...
Is it possible to add multi-line placeholder text in a textarea? I found this solution, but unfortunately it does not work on Mozilla and Safari. It seems Chrome is the only browser where this method works: $('#nameTxtBox').attr("placeholder", ...
Can we adjust the div position using CSS (absolute or relative) with JavaScript? Here's an example code snippet: <div id="podpis" style="margin-top: 2rem;"> <div class="invoice-signature"> <span><?=$xml->sanitiz ...
Currently, I have a div containing elements that are aligned perfectly. However, I need to scale this div to fit the viewport size. Using CSS scale is not an option as it does not support pixel values. https://i.stack.imgur.com/uThqx.png I am looking to ...
I am currently working with quasar and I attempted to start the project using these commands: quasar build -m capacitor -T android quasar dev -m capacitor -T android Unfortunately, when I entered the first command, I encountered this error: FAILURE: Build ...
Hey there! I'm currently working on a function that allows for sliding through a series of images contained within a div. The goal is to cycle back to the beginning when reaching the end, and vice versa when going in the opposite direction. While my c ...
<App> includes both <Header> and <Content> components. I am attempting to calculate the height of <Content>, which is equal to the height of <App> minus the height of the header. // App.js import { useStyles } from "./Ap ...
Let's imagine a scenario where I need to execute a Mongoose query in an Express post route: app.post("/login",(req,res)=>{ const username = req.body.username const password = req.body.password User.find({username:username},(er ...
Currently, I am delving into the complexities of linear algebra and experimenting with crafting a simple program that incorporates fundamental linear transformations (rotating, scaling, translating). Behold, here is a fully functional example: https://cod ...
How can I hide certain components (AppBar & NavigationDrawer) on specific routes in my App.vue, such as /login? I tried including the following code in my NavigationDrawer.vue file, but it disables the component on all routes: <v-navigation-drawer ...
I encountered a never-ending loop problem when I added a dispatch function in my code within the useEffect hook. Despite looking into similar issues raised by others, I still can't seem to figure out the root cause of the problem. Here is how my compo ...
One thing that is confusing me is the jQuery array object. To explain further: I have two arrays, one called brandsLink and the other called floorLink. When a user clicks on a link, I am saving the brand name in a variable called brandName, and then checki ...
I recently developed a basic TicTacToe game using react-hooks. At times, I notice that the result is displayed before the state update on the screen. https://i.sstatic.net/LMDeZ.png Other times, the result shows up after the update is visible on the scr ...
I'm currently working on integrating the Google Maps API into an Angular website, but I'm encountering initialization issues. Within my HTML page, I'm utilizing bootstrap nav nav-tabs and switching between tabs using an Angular controller. ...
I've created a script for generating random moving lines as a background element for my portfolio. While it runs smoothly on its own, I encounter frame drops when combining it with other CSS animations and effects, especially at the beginning (althoug ...
I'm looking to create a dynamic sidebar based on the user's role, which is stored in $rootScope.login. However, I'm unsure of how to integrate it into template.js. Below is my JavaScript code and I'm still relatively new to AngularJS. ...