8000 [BUG] radialBar chart of apexcharts does not work with tabler-vendors.css and tabler-vendors.min.css · Issue #1585 · tabler/tabler · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

[BUG] radialBar chart of apexcharts does not work with tabler-vendors.css and tabler-vendors.min.css #1585

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
beginor opened this issue May 18, 2023 · 1 comment
Closed

[BUG] radialBar chart of apexcharts does not work with tabler-vendors.css and tabler-vendors.min.css #1585

beginor opened this issue May 18, 2023 · 1 comment
Labels
bug Something isn't working

Comments

@beginor
Copy link
beginor commented May 18, 2023 •
edited
Loading

radialBar chart of apexcharts does not work with tabler-vendors.css and tabler-vendors.min.css.

radialBar chart of apexcharts does not work with tabler-vendors.css and tabler-vendors.min.css.

Just copy demo from apexcharts's official demo :

https://apexcharts.com/javascript-chart-demos/radialbar-charts/multiple-radialbars/

/** @type {import("apexcharts").ApexOptions } */
var options = {
  series: [44, 55, 67, 83],
  chart: {
  height: 350,
  type: 'radialBar',
},
plotOptions: {
  radialBar: {
    dataLabels: {
      name: {
        fontSize: '22px',
      },
      value: {
        fontSize: '16px',
      },
      total: {
        show: true,
        label: 'Total',
        formatter: function (w) {
          return 249
        }
      }
    }
  }
},
labels: ['Apples', 'Oranges', 'Bananas', 'Berries'],
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

And I get a result like this:

image

I have trived inspect the charts's element, and I found there was an override of .apexcharts-radialbar-area

image 
.apexcharts-radialbar-area {
    stroke: var(--tblr-border-color-dark)!important;
}

But the css variable --tblr-border-color-dark does not exists, the most like one is --tblr-border-dark-color, but after I override this rule with style:

.apexcharts-radialbar-area {
    stroke: var(--tblr-border-dark-color)!important;
}

and I get a result like this:

image

Finally, I got the chart works by delete the .apexcharts-radialbar-area override rule in tabler-vendors.css and tabler-vendors.min.css , because I don't know how to override it again.

https://github.com/tabler/tabler/blob/dev/dist/css/tabler-vendors.css#L1176

image
@beginor beginor added the bug Something isn't working label May 18, 2023
@beginor
Copy link
Author
beginor commented Jun 29, 2023

It's easy to reproduce this, just goto https://preview.tabler.io/charts.html , then inject some code like this:

<div class="card">
  <div class="card-body">
  <div id="chart-radio-bar-multiple"></div>
  </div>
</div>
document.addEventListener("DOMContentLoaded", function () {
  window.ApexCharts && (new ApexCharts(document.getElementById('chart-radio-bar-multiple'), {
    series: [44, 55, 67, 83],
    chart: {
    height: 350,
    type: 'radialBar',
  },
  plotOptions: {
    radialBar: {
    dataLabels: {
      name: {
        fontSize: '22px',
      },
      value: {
        fontSize: '16px',
      },
      total: {
        show: true,
        label: 'Total',
        formatter: function (w) {
        // By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
        return 249
        }
      }
    }
    }
  },
  labels: ['Apples', 'Oranges', 'Bananas', 'Berries'],
  })).render();
});

Will get chart like this:

image

And the chart will be correctly by disable the css rule .apexcharts-radialbar-area in tabler-vendors.css

image

rjd22 added a commit that referenced this issue Oct 20, 2023
@rjd22
fix #1585 radial chart not working properly
23e27d8
@rjd22 rjd22 closed this as completed in f8f55f5 Oct 20, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@beginor
0