Adding labels and descriptive label to D3.js donut chart - javascript

I'm using the following d3.js donut chart: jsfiddel
What I would like to do is extend this example so that:
Each coloured section needs a text label
I want to colour in the centre of the donut, and add some text to the centre of the donut
I need to be able to style each path based on it's class, so how can I apply a class?
Any help appreciated, many of the samples for d3.js are hosted on a site which is currently down .

Related

How to create an interactive pie chart with javascript, html, css?

How to create a pie chart widget where the user can change the distribution of the pie chart by dragging the borders of the wedges?
Is there a package with such a widget in react?
Personally i have never seen a pie with draggable border to change the distribution. I have worked with ApexCharts (https://apexcharts.com/react-chart-demos/pie-charts/update-donut/). Each part of the pie is basicaly a number so, you can create for example a slider for each part and dynamicly update the part of the chart.

Javascript D3.js Nested Axis Labels for Radar Chart

I would like to add nested axis Labels to my radar chart. All online resources just show a singular axis.
An example of the image I am trying to reproduce is shown in the below figure.
The axis is Management.sr_lvl_1, Management.sr_lvl_2, Management.sr_lvl_3... However, I want the word management to appear only once in the label which spans across all sr_lvl

Highcharts stacked area chart with background chart

What i would like: (not in highcharts)
Note the gray backround graph showing the average trend
What i currently have: (made with highcharts)
I managed to implement the stacked area chart, but i would like to add the grey average graph in the background.
Could anyone tell me if and how this is possible?
Thanks!
The answer was simply adding the "stack" variable to my series, which allows you to build multiple stacks of "stacked area" charts: one for the actual values, one for the average of last week. Thanks to everyone for their input

How to set curve to the labels in the Highchart Pie Chart

I'm using Highcharts JS library for drawing a pie chart where I have to show some labels in circular format. In my case, it's name of projects which I wanted to show in it's own block aligned with arc. See my code here Jsfiddle
I've tried with some other JS libraries like CircleType and Arctext to give the curve shape for these labels. But for this, the attribute ID needs to be set for the particular text which I'm not able to do. By modifying Highcharts.js, I can manage to set ID for the Title of chart and when I set the property like jQuery('#myid').arctext({radius: 50, rotate: true}); the title disappears.
So is it feasible to do this task in the graph?
Any help will be appreciated.

Putting images as axis ticks in d3.js

is it possible to put images as axis ticks using d3.js javascript library?
I am trying to visualize a simple bar graph (done!) but in the x-axis I need to show a different image for each bar.
It is possible. The way to think about this is using d3 to position images on a page.
If you have each image in a div with it's own id then you can use d3 to select and position those divs. I found this tutorial very helpful.

Categories

Resources