Discover the steps for generating this graph using ZingChart

I have been experimenting with ZingChart in an attempt to replicate a chart that has the same look and functionality as this example:

https://i.stack.imgur.com/PGNK3.png

Despite making numerous adjustments to a bar chart, I have not been able to achieve the desired result.

Is it feasible to create a chart like this using ZingChart?

javascriptchartsbar-chartlinechartzingchart

Answer №1

The chart displayed below is based on the design you provided. If you have any queries regarding my approach, feel free to ask for clarifications.

Important Note: To view the chart accurately, it is recommended to switch to full page mode.

var myConfig = {
  type:'mixed',
  title: {
    text: 'Rank by MPH',
  },
  scaleX: {
    offset: 0, 
    offsetEnd: 10, 
    maxItems: 2,
    tick: {
      visible:false,
    },
    item: {
      fontColor: '#000',
      fontSize: 14,
      rules: [
        {
          rule: '%i == 16',
          text: '129',
        }  
      ]
    },
    lineWidth:2,
    lineColor: '#000',
  },
  scaleY: {
    minValue: 0,
    maxValue: 100,
    step: 50,
    format: '%v%',
    markers: [
      { 
        type: 'line',
        range: [0,100],
        lineWidth: 3,
        lineColor: '#000',
      }  
    ],
    tick: {
      visible:false,
    },
    item: {
      fontColor: '#000',
      fontSize: 14
    },
    guide: {
      visible: false,
    },
    lineWidth:2,
    lineColor: '#000',
  },
  labels: [ 
    { 
      hook: 'node:plot=1,index=1',
     backgroundColor: '#000',
     fontColor: '#fff',
     text: 'Rank 11 / 16',
      calloutWidth: 20,
     callout: true,
     calloutPosition: 'bottom',
     padding: 15,
     borderRadius: 10,
     fontSize: 15,
     offsetY: -50,
    },    
    { 
      hook: 'scale:index=11',
     text: '100 mph',
     fontSize: 15,
     offsetY: 15,
    },
  ],
series: [
{
   type: 'bar', 
   barWidth:20,
   barSpacing:1,
   borderRadius:'10 10 0 0',
   backgroundColor: '#c0c0c0',
   tooltip: {
     backgroundColor: '#000',
     text: 'Rank %i / 16',
        calloutWidth: 20,
       callout: true,
       calloutPosition: 'bottom',
       padding: 15,
       borderRadius: 10,
       fontSize: 15,
       placement: 'node:top',
       offsetY: -20,
   },
   rules: [
     { 
       rule: '%i == 11',
       backgroundColor: 'purple',
     }
   ],
values: [null,5,9,12,19,25,30,34,39,45,49,54,58,65,69,74,79],
},
{
  type: 'line',
  lineColor: 'purple',
  lineStyle: 'dotted',
   valueBox: {
     text: '%v%',
     placement: 'left',
     offsetX: -18,
     fontSize: 12,
     rules: [
       { 
         rule: '%i == 1',
         visible: false,
       }  
     ],
   },
  marker: {
    borderColor: 'purple',
    borderWidth: 2,
    backgroundColor: '#fff',
    size: 9,  
    rules: [ 
      { 
        rule: '%i == 0',
        visible:false,
      }  
    ],
  },
  values: [[0,69], [11,69]], 
}
]
};

zingchart.render({ 
id: 'myChart', 
data: myConfig, 
height: '100%', 
width: '100%',
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the most efficient way to retrieve the current user's ID within Loopback?

Given the instability and deprecation of loopback.getCurrentContext(), what strategies can I use to accurately identify users when they interact with API endpoints? Is it feasible to include the token ID in the request payload for verification purposes? H ...

javascriptloopbackjs

Leveraging Google Cloud Functions with Next.js (Client-Side Rendering)

Having trouble incorporating firebase cloud functions into my Next.js project, encountering an unfamiliar error. firebase-config.js const firebaseConfig = { apiKey: '~~~', authDomain: '~~', projectId: '~~~', storageBu ...

javascriptreactjsfirebasenext.jsgoogle-cloud-functions

I would like to add a border at the bottom of each item in a ul list

My current focus is on making my website responsive with a breakpoint set at 576px I am aiming to achieve the design shown in this image without any space in the border-bottom and have both elements expand to full width: menu li hover However, I'm c ...

javascripthtmlcsshtml-lists

Display a string of text containing multiple interactive links

I have a table and I want to create an interactive effect where, upon mouseover or click of certain elements, text will appear next to it. This text may contain multiple lines and clickable links within the content. For instance, in the table generated by ...

javascriptjqueryhtmlcss

Animating with jQuery to a specific offset or position

Currently, I am utilizing jQuery animate to modify the location of an element: $('#item').animate({'top' : '-50'}, 0); The goal is to set the position without any animations. I experimented with both offset and position, but ...

javascriptjquery

Comparison between Filament Group's loadCSS and AJAX technologies

The loadCSS library developed by Filament Group is widely recognized as the standard for asynchronously loading CSS. Even Google recommends its use. However, instead of using this library, some suggest utilizing ajax to achieve the same result. For example ...

javascriptcssajaxperformance

Discovering the name, id, and class attributes of a RadioButtonList within a content placeholder using JavaScript

Working on a web forms project with a Master Page implementation, I have added the following code in my content place holder. <asp:RadioButtonList ID="ckbLstPartner" runat="server" name="ckbLstPartner" RepeatDirecti ...

javascriptasp.netmaster-pagescontentplaceholder

Refreshing an Angular datatable using promises - reload directive

I am currently using angular-datatables along with promises and everything is working smoothly. I have various actions that can be performed on each record (using angular $http resource) such as changing a status or similar tasks. However, I find that I n ...

javascriptangularjsdatatablesangular-httpangular-datatables

What is the best method to update numerous low-resolution image sources with higher resolution images once they have finished loading?

I'm currently developing a website that implements a strategy of loading low-resolution images first, and then swapping them for high-resolution versions once they are fully loaded. By doing this, we aim to speed up the initial loading time by display ...

javascripthtmlcssajax

Try out the Jquery Chosen plugin, which allows you to select multiple instances of the same

I am currently using the chosen plugin to create multiple select input fields. You can view an example of this in action by following this link: By default, the plugin disables an option if it has already been selected. For instance, in the provided examp ...

javascriptjqueryjquery-chosen

Using Vue.js to pass a variable from a parent component to a child component

Parent component: ShowComment Child component: EditComment I'm attempting to pass the value stored in this.CommentRecID to the child component. In the template of ShowComment, I have included: <EditComment CommentRecID="this.CommentRecID" v-if= ...

javascriptjqueryvue.jsvue-props

Vue.js provides an interesting object that contains observed data

My axios request looks like this: retrieveData() { Axios.get( '/vue/get-data/', { ...

javascriptvue.js

Execute a specialized function with imported modules and specified parameters

Within an npm project, I am looking to execute a custom function with arguments, or ideally provide it as a script in the package.json file like this: npm run custom-function "Hello, World". Currently, I have a file called src/myFunction.ts: import * as e ...

javascripttypescriptnpmnpm-scripts

Is there a way to determine when an HTML video has finished playing?

I'm working on a webpage that features multiple videos. I want to capture a specific value from an input field and display it once a video finishes playing. Below is my current setup: HTML <input type='text' name='profileUsernam ...

javascript

HTML tends to disregard the dimensions specified in the JavaScript file

I'm currently working on replicating an Etch-a-Sketch style drawing board where hovering over a single pixel with the mouse changes its color. However, I've hit a roadblock when it comes to drawing the board. The flexbox container doesn't se ...

javascripthtmlcssflexboxsize

"Exploring the intricacies of routing within a Node.js application

I previously had around 100 blogs displayed on the "/" page with links for sorting by date (a-z). When clicking on these links, I am redirected to different routes - one is "/sort_by_date" and the other is "/sort_alphabetically". Unfortunately, I was unabl ...

javascriptnode.jsmongoose

Instructions for launching an Android app from a website

Is it possible to invoke my app from HTML? For instance, I am able to successfully call a webpage from my app using this code. android code: startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse( "myDomain.com"))); ...

javascriptandroidhtmliosweb

JavaScript and jQuery validation issues persisting

Here is the HTML code I am using: <script src="js/validate.js"></script> <label>FIRST NAME:</label> <td> <input type="text" class="firstname" id="firstname" onKeyUp="firstname()" /> </td> <td> <label id=" ...

javascripthtmlvalidation

What is the best way to pass values between JSP Expression Language and Javascript?

I have a request object with the following content: List<Integer> list What is the best way to loop through this list using JavaScript? I am interested in obtaining the values of each element within the list. Note that these list values are not cu ...

javajavascriptspring

Using static methods within a static class to achieve method overloading in Typescript

I have a TypeScript static class that converts key-value pairs to strings. The values can be boolean, number, or string, but I want them all to end up as strings with specific implementations. [{ key: "key1", value: false }, { key: "key2&qu ...

javascripttypescriptvue.js